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%),
css怎么创建
linear-gradient(to right, transparent 35%, #d00 35%,
#d00 65%,
transparent 65%),
}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论