html怎么画正方形的斜线,HTML – 如何绘制对角线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);

}

从spec开始：

skewY() specifies a 2D skew transformation along the Y axis by the

given angle.

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

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