CSS3で片面平行四辺形にする

Question

私はCSS3で平行四辺形を作っています。このコードでは：

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

今私は右と左ベベルがあります。しかし、私は斜面にのみしたい。どうすればいい？

おかげ

Answer 1

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

これで台形が作成されます。

またはこの：これは平行四辺形ここ

を作成します

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

はCSSと、単一のHTML要素と形状のすべての種類を作成する方法についての記事です。これは、三角形から星型までのあらゆる形状を作成するための非常に興味深い方法です。
The Shapes of CSS