CSS 实现关闭 icon

本文主要是介绍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 技巧，请关注微信公众号

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

这篇关于CSS 实现关闭 icon的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---