css 横线_CSS 实现关闭 icon

本文介绍关闭 icon 的实现。关闭 icon 有两条线组成，所以很简单的设想就是两条横线，分别旋转不同角度即可。

HTML

<span id="close">span>

CSS

#close {

    display: inline-block;

    width: 23px;

    height: 2px;

    background: red;

    transform: rotate(45deg);

}

#close::after {

    content: '';

    display: block;

    width: 23px;

    height: 2px;

    background: red;

    transform: rotate(-90deg);

}

解析

• 给 span 元素设置合适的宽高，到达要求的效果大小

• 旋转 span 元素，实现一条线的效果

• 添加 ::after 伪元素，设置和 span 相同的宽高(注意此处 display 值应为 block，否则设置宽高无效)

• 旋转 ::after 伪元素。由于基准元素 span 已经旋转，伪元素旋转参考点不是水平坐标系，而是旋转后的 span 元素，将伪元素旋转 90 度或 -90 度均可

• 其中设置的背景色即为 icon 的颜色

运行效果

GitHub 源码

https://github.com/nanzhangren/CSS_skills/blob/master/sign/close