css 画一个十字 |uncc cssa

ie css 宽度，css深入行高，css自动缩放代码，移动端css代替float，css样式里面怎么引用图片，css中字体加粗怎么写，uncc cssa css 画一个十字 |uncc cssa

.cross {
width: 100px;
height: 100px;
position: relative;
}
.cross:before,
.cross:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 50%;
height: 3px;
background-color: black;
}
.cross:before {
left: 0;
transform: rotate(45deg);
}
.cross:after {
right: 0;
transform: rotate(-45deg);
}

上面的代码将创建一个包含两个旋转矩形的基本CSS十字形。

首先，大家创建了一个相对定位的元素，其宽度和高度均为100像素。然后，大家使用:before和:after选择器创建两个伪元素。

这两个元素均采用绝对定位。将上、下、左、右位置设置为0并使用margin:auto将它们放置在十字形的正中心。

:before元素的左侧设置为0，并使其以45度旋转。:after元素的右侧设置为0，并将其向左旋转45度，这样大家就得到了一个漂亮的十字形。

这是CSS绘制十字形的一种简单而优雅的方法。您可以根据自己的需要进行调整和更改，以实现不同的效果。