怎样不引入图片实现前端css实现x关闭按钮

1. 首先初始化一个dom节点

<span class="closeButton"></span>

2. 设置样式

.closeButton {width: 12px;height: 12px;margin-top: 5px;margin-right: 5px;float: right;cursor: pointer;color: #105c86;}

3. 通过伪元素before after画两条线
   margin-left 的设置是为了处理’线’的自身宽度

 &::before,&::after {position: absolute;// right: 0;width: 2px;height: 12px;margin-left: 2px;content: '';background: #105c86;}

4. 分别试着旋转角度

   &::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