我正在嘗試製作類似於平行四邊形的形狀，但沒有右側的角度。所以它會保持其右上方的直線，但左側將保持其角度。這裏是一個小提琴：http://jsfiddle.net/2hj88xts/如何在CSS中製作與平行四邊形相似的形狀？
CSS：
#parallelogram {
width: 250px;
height: 100px;
transform: skew(-15deg);
background: red;
}
你可以嘗試使用與transparent作爲顏色的border-left和完全放棄了*-transform的。這將需要一個CSS的變化，但沒有額外的HTML標記：
當前角度：
#parallelogram {
width: 250px;
height: 0;
border-bottom: 100px solid red;
border-left: 30px solid transparent;
margin-left: 10px;
}<div id="parallelogram"></div>要調整左側角只是調整的左邊框像素數量。像素量越大，角度越淺。像素量越小，角度越陡。
淺角度：
#parallelogram {
width: 250px;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
margin-left: 10px;
}<div id="parallelogram"></div>陡峭的角度：
#parallelogram {
width: 250px;
height: 0;
border-bottom: 100px solid red;
border-left: 15px solid transparent;
margin-left: 10px;
}<div id="parallelogram"></div>好了，將兩個divs在一起，並從右側div的影響，並把它留給重疊左div的邊緣。做這樣的事情：
#parallelogram {
\t width: 250px;
\t height: 100px;
\t -webkit-transform: skew(-15deg);
\t -moz-transform: skew(-15deg);
\t -o-transform: skew(-15deg);
\t background: red;
margin-left:10px;
display:inline-block;
}
#end {
width: 250px;
height: 100px;
background: red;
display:inline-block;
margin-left:-20px;
}<div>
<div id="parallelogram">
</div>
<div id="end">
</div>
</div>使用pseudo element：
#parallelogram {
width: 250px;
height: 100px;
background: red;
margin-left: 100px;
position:relative;
}
#parallelogram:before{
content: '';
position:absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 100px 40px;
border-color: transparent transparent red transparent;
left: -40px;
}<div id="parallelogram"></div>更新
如果你愛living on the edge，嘗試clip-path：
#parallelogram{
\t width: 250px;
\t height: 100px;
\t background: red;
\t -webkit-clip-path: polygon(29% 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(29% 0, 100% 0, 100% 100%, 0% 100%);
}<div id="parallelogram"></div>這裏是沒有任何的CSS svg解決方案。
<svg>
<path d="M60,0 L250,0 L250,100 20,100z" fill="red" />
</svg>
'：before'和'：content'，偉大的解決方案！ +1 – 2014-12-02 18:49:30