html - CSS transform : multiple divs, 相同的CSS，不同的结果

Question

我的目标是创建许多具有相同水平倾斜度的平行四边形。 第一个本身是完美的，随着我添加更多的 div，偏差似乎随着每个 div 的增加而增加。 我对图像 (transform: rotate()) 进行了尝试，结果相同。

我有一个类来创建它们。

CSS:

.parallelogram-1 {
  width: 30px;
  height: 45px;
  margin: 0px 40px;
  border-left: 1px solid #000;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  background: red;
}

HTML:

<div id="para">
  <div class="parallelogram-1">
  <div class="parallelogram-1">
  <div class="parallelogram-1">
</div>

Here's a fiddle

非常感谢您的帮助! ;-)

Answer 1

您忘记关闭您的 div。

<div id="para">
  <div class="parallelogram-1"></div>
  <div class="parallelogram-1"></div>
  <div class="parallelogram-1"></div>
</div>

Updated Fiddle