在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