美文网首页
手机端常用的有一个小角的提示框

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

作者: 生于乱世 | 来源:发表于2022-02-24 16:10 被阅读0次
    /*提示框容器-上三角形*/
        .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;
        }
    

    相关文章

      网友评论

          本文标题:手机端常用的有一个小角的提示框

          本文链接:https://www.haomeiwen.com/subject/hqnzlrtx.html