美文网首页
用css的:before和:after写对号和叉号

用css的:before和:after写对号和叉号

作者: 喵喵爱吃鱼_ | 来源:发表于2020-07-20 14:44 被阅读0次

    对号

    <div class="success"></div>
    
    .success {
      position: relative;
      width: 16px;
      height: 16px;
      background: #093;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .success::before {
      position: absolute;
      content: '';
      width: 5px;
      height: 8px;
      transform: rotate(45deg);
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
      top: 1px;
    }
    

    叉号

     <div class="error"></div>
    
    .error {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 16px;
      height: 16px;
      background: #f00;
      border-radius: 50%;
    }
    .error::before, .error::after {
      position: absolute;
      content: '';
      width: 2px;
      height: 12px;
      background: #fff;
    }
    .error::before {
      transform: rotate(45deg);
    }
    .error::after {
      transform: rotate(-45deg);
    }
    
    image.png

    相关文章

      网友评论

          本文标题:用css的:before和:after写对号和叉号

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