css3 绘制十字架

CSS3是前端开发中派崭新的技术，能够帮助你更加轻松地实现各种效果。这里我们来学习一下如何使用CSS3来绘制一个漂亮的十字架。

.cross {
    width: 200px;
    height: 200px;
    position: relative;
}
.vertical-line {
    width: 2px;
    height: 100%;
    background: #333;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.horizontal-line {
    width: 100%;
    height: 2px;
    background: #333;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
    

我们首先创建一个div，给它一个宽高，然后设置它的position为relative。这是因为我们后面使用了绝对定位来绘制横线和竖线，要确保它们相对于这个div进行定位。

接下来，我们分别创建竖线和横线。竖线的宽度是2px，高度为100%，背景颜色为#333。我们将它设置为绝对定位，然后让它左右居中，这是通过将左边距设置为50%，然后使用transform的translateX函数向左移动50%实现的。

横线的宽度也为100%，高度为2px。我们将它设置为绝对定位，然后让它上下居中。这是通过将上边距设置为50%，然后使用transform的translateY函数向上移动50%实现的。

最后，我们将竖线和横线都放入我们创建的div中，就完成了这个漂亮的十字架。我们可以通过修改宽度、高度、颜色等属性来调整它的样式，使它适合不同的需求。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！