Make parallelogram on one side in CSS3

Question

I made 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 a right and left bevel. But I only want to bevel. How can i do this?

thanks

Answer 1

UPDATE:

Here is an example and result: 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 that:

 <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's an article about creating all kinds of shapes with just CSS and one HTML element. This is a very interesting way to create each shape from a triangle to a star.
CSS Forms