淘先锋技术网

首页 1 2 3 4 5 6 7

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的大小和位置来制作出更多不同样式的加号。