HTML– 如何绘制对角线div？

概述如何在CSS中绘制对角线div？谷歌只揭示了如何绘制对角线“线条”,但我无法理解如何为div做出这一点.在下图中,蓝色部分是div：最佳答案您可以使用CSS3 transform skewY()函数,父值为正值,子包装元素为负值,以实现效果..parent { -webkit-transform: skewY(-5deg); -moz-transfo

如何在CSS中绘制对角线div？谷歌只揭示了如何绘制对角线“线条”,但我无法理解如何为div做出这一点.

在下图中,蓝色部分是div：

最佳答案您可以使用CSS3 transform skewY()函数,父值为正值,子包装元素为负值,以实现效果.

.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);}

WORKING DEMO.

从spec开始：

skewY() specifIEs a 2D skew transformation along the Y axis by the
given angle.

值得注意的是,使用skewY()不会改变转换元素的宽度.

还要注意子选择器.最好使用直接child selector .parent> .child而不是descendant selector来否定子元素的变换. 总结

以上是内存溢出为你收集整理的HTML – 如何绘制对角线div？全部内容，希望文章能够帮你解决HTML – 如何绘制对角线div？所遇到的程序开发问题。

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