How do I draw a Diagonal div?

问题:

How do I draw a diagonal div in CSS? Google only reveals how to draw diagonal "lines", but I could not understand how to make that for div's.

In the pic below, the blue part is the div:

回答1:

You could use CSS3 transform skewY() function with positive value for the parent and negative value for the child wrapper element to achieve the effect.

.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.

From the spec:

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

It's worth noting that the using skewY() won't change the width of the transformed elements.

Also mind the child selector. It's better to use direct child selector .parent > .child rather than descendant selector to negate the transform on the child element.

回答2:

Use :

transform: rotate(45deg); 

Just add prefixes for all browsers (-webKit, -moz, ... )

文章来源: How do I draw a Diagonal div?