怎样不引入图片实现前端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