我该如何使用纯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>
结果:
另外,是否可能只有元素而没有包装它?例如:
<div class="to-right"></div>
<div class="to-right"></div>
<div class="to-left"></div>
这是可能的吗?