我正在尝试制作类似于平行四边形的形状，但没有右侧的角度。所以它会保持其右上方的直线，但左侧将保持其角度。这里是一个小提琴：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