Question

我正在尝试在CSS中制作平行四边形，其中只有一面不直，但我现在只能做到这两面，例如：

#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
   -moz-transform: skew(20deg);
     -o-transform: skew(20deg);
background: red;
}

左侧和右侧显示弯曲的一侧。我只需要在右边。

如何做到这一点？

Answer 1

尝试使用带有overflow: hidden;和负边距的包装器，它只会隐藏左侧倾斜

#parallelogram {
  width: 150px;
  height: 100px;
  -webkit-transform: skew(20deg);
     -moz-transform: skew(20deg);
       -o-transform: skew(20deg);
  background: red;
  margin-left: -19px; /* (tangens(20deg)*100px)/2 */
}
#wrapper{
  overflow: hidden;
}

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

Answer 2

您可以简单地使用以下边框进行游戏，而不是使用倾斜和度数：

＆＃13;

#parallelogram {
	border-bottom: 100px solid red;
	border-right: 50px solid transparent;
	width: 100px;
}

＆＃13;

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

＆＃13;

Answer 3

您可以使用matrix3d() CSS转换，其中包含good browser support（IE10 +）。使用this codepen example进行一些测试可以得到一个这样的例子：

transform-origin: 0 0 0;
transform: matrix3d( 0.66,  0,     0,     0,
                    -0.51,  0.66,  0,    -0.0017,
                     0,     0,     1,     0,
                   102,     0,     0,     1 );

<img src="http://www.fillmurray.com/300/200" alt="" style="transform-origin: 0 0 0; transform: matrix3d(0.66, 0, 0, 0, -0.51, 0.66, 0, -0.0017, 0, 0, 1, 0, 102, 0, 0, 1);" >

如何在CSS的一侧制作平行四边形？

3 个答案: