Question

我正在尝试制作类似于平行四边形的形状，但没有右侧的角度。所以它会在右侧保持直线上下，但左侧将保持其角度。这是一个小提琴：http://jsfiddle.net/2hj88xts/

CSS：

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

Answer 1

您可以尝试使用border-left作为颜色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：

＆＃13;

#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;
}

＆＃13;

<div id="parallelogram"></div>

＆＃13;

JSFiddle

<强>更新

如果您喜欢living on the edge，请尝试clip-path：

＆＃13;

#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%);
}

＆＃13;

<div id="parallelogram"></div>

＆＃13;

JSFiddle

Answer 3

好的，所以将两个divs组合在一起并从右侧div移除效果，然后将其向左拉以重叠左侧div的边缘。做这样的事情：

#parallelogram {
	width: 250px;
	height: 100px;
	-webkit-transform: skew(-15deg );
	-moz-transform: skew(-15deg);
	-o-transform: skew(-15deg);
	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>

Answer 4

这是一个没有任何CSS的svg解决方案。

<svg>
  <path d="M60,0 L250,0 L250,100 20,100z" fill="red" />
</svg>

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

4 个答案: