我怎样才能使对角线填充并适合一个盒子（只是纯CSS - 不使用任何背景图像）？
div.diagonal-container {
border: 1px solid #000;
width:400px;
height:400px;
margin: 0 auto;
}
.to-right,
.to-left {
border-top:1px solid #ff00ff;
width:100%;
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.to-right {
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<div class="diagonal-container" style="">
<div class="to-right"></div>
</div>
<div class="diagonal-container" style="">
<div class="to-right"></div>
</div>
<div class="diagonal-container" style="">
<div class="to-left"></div>
</div>
Result:
jsfiddle https://jsfiddle.net/jf9e878v/.
另外，是否可以只拥有一个元素而不包装它？例如：
<div class="to-right"></div>
<div class="to-right"></div>
<div class="to-left"></div>
是否可以？
您可以添加一个linear-gradient background并放弃内部元素，将该类添加到另一个 div
div.diagonal-container {
border: 1px solid #000;
width: 400px;
height: 400px;
margin: 0 auto;
}
.to-right {
background: linear-gradient(135deg, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px) );
}
.to-left {
background: linear-gradient(45deg, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px) );
}
<div class="diagonal-container to-right"></div>
<div class="diagonal-container to-right"></div>
<div class="diagonal-container to-left"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
