Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make a parallelogram with one side in CSS3

Tags:

html

css

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

like image 791
Mike Vierwind Avatar asked Feb 27 '12 09:02

Mike Vierwind


People also ask

How do you make a parallelogram border in CSS?

To make a parallelogram, create a rectangle and add the transform: skew(20deg); property. You can choose other degrees to make the parallelogram more or less pronounced. To make a parallelogram-shaped button with a text inside, use a pseudoelement.

How do you skew one side of a div?

Try this: To unskew the image use a nested div for the image and give it the opposite skew value. So if you had 20deg on the parent then you can give the nested (image) div a skew value of -20deg. @darthmaim's answer (below) to use a psuedo (before or after) to skew the inner border's should be the accepted answer.


1 Answers

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

like image 103
Itay Grudev Avatar answered Oct 02 '22 06:10

Itay Grudev