Utwórz równoległobok z jedną stroną w CSS3

Question

Wykonałem równoległobok z CSS3. Z tym kodem:

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

Teraz mam prawy i lewy skos. Ale chcę tylko na prawo skos. Jak mogę to zrobić?

Dzięki

Answer 1

UPDATE:

Oto przykład i kod wynik: 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> 

To utworzy trapezoid.

Albo to:

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

To stworzy równoległobok

Oto artykuł na temat tworzenia wszelkiego rodzaju kształtów z tylko CSS i pojedynczego elementu HTML. Jest to bardzo interesujący sposób tworzenia każdego kształtu od trójkąta do gwiazdy.
The Shapes of CSS