CSS转换：多个div，相同的CSS，不同的结果

Question

我的目标是创建一些水平放置相同倾斜的平行四边形。 第一个本身就是完美的，当我添加更多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

Answer 2

你的div正在变得更加歪斜，因为你之前并没有关闭它们。关闭div：

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

Answer 3

问题是你在每个声明的末尾忘记了</div>！

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

Answer 4

你没有关闭你的div。此外，如果您希望它们并排，请将它们作为内联块，或者它们将是每个块都在其自己的行上。

HTML：

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

CSS：

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

这是小提琴：

http://jsfiddle.net/0u14evtx/8/