如何将对角线填入并装入一个盒子(只是纯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>
可能吗?
解决方法
您可以使用伪元素绘制线条.
.diagonal-container { border: 1px solid #000; width: 400px; height: 400px; margin: 0 auto; position: relative; overflow: hidden; } .diagonal-container:before { border-top: 1px solid #ff00ff; content: ''; position: absolute; top: 0; left: 0; right: -50%; transform: rotate(45deg); transform-origin: 0 0; } .to-right:before { right: 0; left: -50%; transform: rotate(-45deg); transform-origin: 100% 0; }
<div class="diagonal-container to-right"> </div> <div class="diagonal-container to-left"> </div> <div class="diagonal-container to-right"> </div>