css 实现叉号

css 实现叉号有很多种方式，大多都是利用 border; 今天分享一组实现方式如下：

<div class="close"></div>
复制代码

close {
    position: relative;
}

.close::before,
.close::after {
    position: absolute;
    content: ' ';
    background-color: #eee;
    left: 20px;
    width: 1px;
    height: 20px;
}

.close::before {
    transform: rotate(45deg);
}

.close::after {
    transform: rotate(-45deg);
}
复制代码

利用伪类创建两个宽度为1px的长方形，然后，分别旋转这两长方形，形成一个叉号。

带圆圈的叉号

分析： 还是使用伪类通过border+旋转实现叉号，然后设置该元素相对于圆圈元素的定位。主要是要设置好定位，伪类元素是相对于元素定位的，而元素是相对于圆圈定位的

             <div className='delWrapper'>
                    <div className='del'></div>
             </div>
复制代码

   .delWrapper{
              position: relative;
              width: 20px;
              height: 20px;
              top: 24px;
              right: 20px;
          }
          .del{
              position: absolute;
              width:20px;
              height: 20px;
              border: 1px solid;
              border-radius: 20px;
          }
          .del::before,.del::after {
              position: absolute;
              content: ' ';
              background-color: #898989;
              width: 0px;
              height: 13px;
              border:1px solid;
              left: 9px;
              top: 2px;
          }
          .del::before {
              transform: rotate(45deg);
          }
          
          .del::after {
              transform: rotate(-45deg);
          }
复制代码