Tạo một hình bình hành với một bên trong CSS3

Question

Tôi đã tạo hình bình hành với CSS3. Với mã này:

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

Bây giờ tôi có bevel phải và trái. Nhưng tôi chỉ muốn righ the bevel. Làm thế nào tôi có thể làm điều đó?

Cảm ơn

Answer 1

UPDATE:

Dưới đây là một ví dụ và mã kết quả: 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> 

Điều này sẽ tạo hình thang.

Hoặc này:

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

này sẽ tạo ra một hình bình hành

Dưới đây là một bài viết về việc tạo ra tất cả các loại hình dạng chỉ với CSS và một phần tử HTML duy nhất. Đó là một cách rất thú vị để tạo mọi hình dạng từ một hình tam giác đến một ngôi sao.
The Shapes of CSS