html – CSS对角线 – 如何适应其父元素？

概述如何将对角线填入并装入一个盒子(只是纯css – 不使用任何背景图像)？ div.diagonal-container { border: 1px solid #000; width:400px; height:400px; margin: 0 auto;}.to-right,.to-left { border-top:1px solid #ff00 如何将对角线填入并装入一个盒子(只是纯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  >    <div ></div></div><div  >    <div ></div></div><div  >    <div ></div></div>

结果：

jsfiddle.

此外,是否可以只有一个元素而不包装它？例如：

<div ></div><div ></div><div ></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 ></div><div ></div><div ></div>

总结

以上是内存溢出为你收集整理的html – CSS对角线 – 如何适应其父元素？全部内容，希望文章能够帮你解决html – CSS对角线 – 如何适应其父元素？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。