如何在CSS中绘制对角线div？谷歌只揭示了如何绘制对角线“线条”,但我无法理解如何为div做出这一点.
在下图中,蓝色部分是div：
最佳答案
您可以使用CSS3 transform
原文链接：https://www.f2er.com/html/426427.htmlskewY()函数,父值为正值,子包装元素为负值,以实现效果.
.parent {
-webkit-transform: skewY(-5deg);
-moz-transform: skewY(-5deg);
-ms-transform: skewY(-5deg);
-o-transform: skewY(-5deg);
transform: skewY(-5deg);
}
.parent > .child {
-webkit-transform: skewY(5deg);
-moz-transform: skewY(5deg);
-ms-transform: skewY(5deg);
-o-transform: skewY(5deg);
transform: skewY(5deg);
}
从spec开始：
skewY()specifies a 2D skew transformation along the Y axis by the
given angle.
值得注意的是,使用skewY()不会改变转换元素的宽度.
还要注意子选择器.最好使用直接child selector .parent> .child而不是descendant selector来否定子元素的变换.
