Creare un parallelogramma con un lato in CSS3

Question

Ho creato un parallelogramma con CSS3. Con questo codice:

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

Ora ho il bisello destro e sinistro. Ma voglio solo il diritto allo smusso. Come posso farlo?

Grazie

Answer 1

UPDATE:

Ecco un esempio e il codice risultato: 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> 

Questo creerà un trapezio.

O questo:

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

Questo creerà un parallelogramma

Ecco un articolo su come creare tutti i tipi di forme con i CSS solo ed un unico elemento HTML. È un modo molto interessante per creare ogni forma da un triangolo a una stella.
The Shapes of CSS