css叉按钮 |lesscsssaas

/* 方案1：使用伪元素before和after创建 */
.close-btn {
position: relative;
width: 24px;
height: 24px;
cursor: pointer;
}
.close-btn:before, .close-btn:after {
position: absolute;
content: '';
width: 2px;
height: 18px;
top: 3px;
background-color: #000;
transform: rotate(-45deg);
}
.close-btn:after {
transform: rotate(45deg);
}
/* 方案2：使用border属性创建 */
.close-btn2 {
width: 24px;
height: 24px;
cursor: pointer;
border: 2px solid #000;
border-radius: 50%;
transform: rotate(-45deg);
}
.close-btn2:before {
content: '';
display: block;
width: 12px;
height: 2px;
background-color: #000;
position: absolute;
top: 11px;
left: 4px;
}

方案1通过伪元素before和after来创建叉的两个线条，然后通过旋转变成叉的形状。方案2则是使用border属性来直接画出叉的形状，再用伪元素加上中间的一条线。

使用这些CSS代码，可以轻松地创建出漂亮的叉按钮，并添加到网站的UI中，提高用户体验。