手机端常用的有一个小角的提示框

/*提示框容器-上三角形*/
    .tip-top {
      font-family: SourceHanSansCN-Normal;
      font-size: 0.22rem;
      line-height: 0.36rem;
      letter-spacing: 0rem;
      color: #999999;
      margin-top: 0.19rem;
      width: 6.91rem;
      padding: 0.11rem 0.19rem;
      background-color: #ffffff;
      box-shadow: 0rem 0rem 0.045rem 0.005rem rgba(150, 150, 150, 0.15);
      position: relative;
      background-color: #FFF;
      /*设置圆角*/
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
    }

    /*生成2个叠加的三角形*/
    .tip-top:before,
    .tip-top:after {
      content: "";
      display: block;
      border-width: 0.14rem;
      position: absolute;
      top: -0.3rem;
      left: 0.2rem;
      border-style: solid dashed dashed solid;
      border-color: transparent transparent #99999930 transparent;
      font-size: 0;
      line-height: 0;
    }

    /*将上面的三角形颜色设置和容器背景色相同*/
    .tip-top:after {
      top: -0.27rem;
      border-color: transparent transparent #FFF transparent;
    }