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

/*提示框容器-上三角形*/
    .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;
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容