html图片十字形,在CSS中创建十字形

您可以使用只有伪元素的方式来实现：

#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, transparent 35%,

#d00 35%,

#d00 65%,

transparent 65%),

}