- 首先初始化一个dom节点
<span class="closeButton"></span>
- 设置样式
.closeButton {
width: 12px;
height: 12px;
margin-top: 5px;
margin-right: 5px;
float: right;
cursor: pointer;
color: #105c86;
}
- 通过伪元素before after画两条线
margin-left 的设置是为了处理’线’的自身宽度
&::before,
&::after {
position: absolute;
// right: 0;
width: 2px;
height: 12px;
margin-left: 2px;
content: '';
background: #105c86;
}
- 分别试着旋转角度
&::before {
transform: rotate(-45deg);
}
&::after {
transform: rotate(45deg);
}
完整代码
.closeButton {
width: 12px;
height: 12px;
margin-top: 5px;
margin-right: 5px;
float: right;
cursor: pointer;
color: #105c86;
&::before,
&::after {
position: absolute;
// right: 0;
width: 2px;
height: 12px;
margin-left: 2px;
content: '';
background: #105c86;
}
&::before {
transform: rotate(-45deg);
}
&::after {
transform: rotate(45deg);
}
}
参考网页
https://www.nowcoder.com/discuss/517014650349744128?fromPut=jj-blog&urlSource=extension-api