如何在css中为平行四边形制作类似的形状？

Question

我试图使形状类似于平行四边形,但没有右侧的角度.因此它会在右侧保持直线上下,但左侧将保持其角度.这是一个小提琴:http://jsfiddle.net/2hj88xts/

CSS:

#parallelogram {
   width: 250px;
   height: 100px;
   transform: skew(-15deg);
   background: red;
}

Answer 1

您可以尝试使用border-leftwith transparent作为颜色并*-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>

Answer 2

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

的jsfiddle

更新

如果您喜欢生活在边缘,请尝试 clip-path:

#parallelogram{
	width: 250px;
	height: 100px;
	background: red;
	-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>

的jsfiddle