Haz un paralelogramo con un lado en CSS3

Question

He hecho un paralelogramo con CSS3. Con este código:

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

Ahora tengo el bisel derecho e izquierdo. Pero solo quiero el derecho al bisel. ¿Cómo puedo hacer eso?

Gracias

Answer 1

ACTUALIZACIÓN:

Aquí es un ejemplo y el código de resultado: 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> 

Esto creará un trapecio.

O esto:

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

Esto creará un paralelogramo

Aquí es un artículo acerca de la creación de todo tipo de formas, con sólo CSS y un único elemento HTML. Es una forma muy interesante de crear cada forma desde un triángulo hasta una estrella.
The Shapes of CSS