How to have a crooked div?

Question

How to have a crooked div like the red div in this page

Here's my CSS:

#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
    background: red;
}

but it's not correct, i think

What makes you think it's not correct? Can you provide a working example to illustrate your problem(s)? — Shaggy, Apr 23 '15 at 13:48
Could you please specify what is "not correct"? It's hard to help otherwise... — Constantin Groß, Apr 23 '15 at 13:49
This might be what you are looking for http://stackoverflow.com/questions/13591584/slant-the-top-of-a-div-using-css-without-skewing-text — web-tiki, Apr 23 '15 at 13:50

score 2 · Accepted Answer · answered Apr 23 '15 at 13:51

I guess (and with the poor information provided it's really just a guess) it might not be working because you are only using the vendor-prefixed versions of transform. The browser you're using might be already (and only) supporting the prefix-less form, so you need to add it:

-webkit-transform: skew(20deg);
   -moz-transform: skew(20deg);
     -o-transform: skew(20deg);
        transform: skew(20deg);

Oh, and if you're trying to copy the exact skew of the example you provided, only along the Y axis, use skewY() instead of skew() and 10 degrees instead of 20 degrees:

-webkit-transform: skewY(10deg);
   -moz-transform: skewY(10deg);
     -o-transform: skewY(10deg);
        transform: skewY(10deg);

score 1 · Answer 2 · answered Apr 23 '15 at 13:52

1

Upon quick inspecting I found that div's transform properties as follows:

transform: skewY(10deg);

Here is a fiddle to get you started

http://jsfiddle.net/98c7e0mq/

answered Apr 23 '15 at 13:52

JuniorDev

1,170
2
9
19

How to have a crooked div?

2 Answers2