CODEWITHSUNDEEP
htmlcss
Mike Vierwind
Mike Vierwind

Reputation: 1520

Make a parallelogram with one side in CSS3

I have make a parallelogram with CSS3. With this code:

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

Now I have the right and left bevel. But i want only to the righ the bevel. How can i make that?

Thanks

Upvotes: 7

Views: 22378

Answers (1)

Itay Grudev
Itay Grudev

Reputation: 7463

UPDATE:

Here is an example and the result code: jsFiddle.

<style type="text/css">
#trapezoid {
    height: 0;
    width: 100px;
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
</style>
<div id="trapezoid"></div>

This will create a trapezoid.

Or this:

<style type="text/css">
#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
    background: red;
}
</style>
<div id="parallelogram"></div>

This will create a parallelogram

Here is an article about creating all kinds of shapes with CSS only and a single HTML element. It's a very interesting way for creating every shape from a triangle to a star.
The Shapes of CSS

Upvotes: 14

Related Questions