CSS 实现叉号

一、普通叉号

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

HTML部分

<div class="close"></div>

CSS部分

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);
}

二、带圆圈的叉号

HTML部分

<div className='closeWrapper'>
	<div className='close'></div>
</div>

CSS部分

.closeWrapper{
  position: relative;
  width: 20px;
  height: 20px;
  top: 24px;
  right: 20px;
}
.close{
    position: absolute;
    width:20px;
    height: 20px;
    border: 1px solid;
    border-radius: 20px;
}
.close::before,.close::after {
    position: absolute;
    content: ' ';
    background-color: #cccccc;
    width: 0px;
    height: 13px;
    border:1px solid;
    left: 9px;
    top: 2px;
}
.close::before {
    transform: rotate(45deg);
}

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