CSS是一种用于控制网页布局和样式的语言,在CSS中我们可以使用一些技巧来绘制简单的图形。这篇文章将介绍如何使用CSS画出一个加号。
.plus { width: 50px; height: 50px; background: #000; position: relative; } .plus:before, .plus:after { content: ""; width: 25px; height: 5px; background: #fff; position: absolute; top: 22px; left: 12px; } .plus:before { transform: rotate(90deg); }
上面的代码中,我们使用一个div元素来作为加号的容器,设置其宽高为50px,背景颜色为黑色。然后我们使用:before和:after伪元素来绘制加号的两条直线。
在:before伪元素中,我们将其宽高设置为25px和5px,然后使用transform: rotate(90deg)将其旋转90度,变成了竖直的直线。在:after伪元素中,我们将其宽高同样设置为25px和5px,然后直接放置在其原始位置。
通过这些CSS代码,我们成功地绘制出了一个简单的加号。你可以通过调整div的宽高、调整:before和:after的大小和位置来制作出更多不同样式的加号。