您可以使用只有伪元素的方式来实现:
#cross {
width: 100px;
height: 100px;
position: relative;
}
#cross:before,#cross:after {
content: "";
position: absolute;
z-index: -1;
background: #d00;
}
#cross:before {
left: 50%;
width: 30%;
margin-left: -15%;
height: 100%;
}
#cross:after {
top: 50%;
height: 30%;
margin-top: -15%;
width: 100%;
}
根据#cross元素的宽度和高度,十字架的大小将按比例缩放
更新:另一个解决方案(使用较少的代码)可以简单地涉及多个线性梯度(无假设).
#cross {
width: 100px;
height: 100px;
background: linear-gradient(to bottom,transparent 35%,#d00 35%,#d00 65%,transparent 65%),linear-gradient(to right,}
@H_403_6@
@H_403_6@
总结
以上是编程之家为你收集整理的在CSS中创建十字形全部内容,希望文章能够帮你解决在CSS中创建十字形所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!