如何更改div的形状

Question

我想知道如何用CSS改变div的形状。我对它进行了一些研究，并发现了关于“歪斜”的问题。但是，我看到的所有例子都没有给出我正在寻找的形状。这是我正在寻找的图像。

Answer 1

有许多不同的方法，在学习CSS时，你可以做的最好就是自己尝试。所以在看下面的方法之前，我建议先看看这些资源：

• How do CSS triangles work?
• The Shapes of CSS

.pattern-column {
  position: relative;
  overflow: hidden;
  background: darkgrey;
  width: 60px;
}
.pattern-column div {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid darkgrey;
  border-bottom: 50px solid transparent;
  margin-left: -40px;
  margin-top: -30px;
}
.pattern-column div:nth-child(2n) {
  border-left: 100px solid grey;
  border-right: 0;
  margin-left: 0;
}
.pattern-column div:nth-child(3n) {
  border-right-color: #ccc;      
  border-left-color: #ccc;
}

<div class="pattern-column">
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

如果它是像素完美的，我会创建一个位置为relative的容器，并定义宽度和高度并将其设置为overflow：hidden。然后创建三个div包含在内部并使用transform：rotate（XXdeg）为每个项目的位置：绝对然后z-index它们相应地叠加彼此。放手一搏。