CSS 实现关闭 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

 

---------

更多 CSS 技巧，请关注微信公众号

公众号菜单栏有微信交流群，欢迎加入~~~