如何更改 div 的形状 [关闭]答案

【问题标题】：How do I change the shape of a div [closed]如何更改 div 的形状 [关闭]
【发布时间】：2017-01-18 19:40:16
【问题描述】：

我想知道如何使用 CSS 更改 div 的形状。我已经对其进行了一些研究，并发现了“倾斜”选项，但是，我所看到的示例都没有给出我正在寻找的形状。这是我正在寻找的图像。

【问题讨论】：

这些示例向您展示了它是如何工作的，因此您可以根据需要对其进行调整。这就是你学习新事物的方式，而不是通过复制粘贴。

标签： html css

【解决方案1】：

有许多不同的方法，在学习 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>

【讨论】：

我查看了这些链接，并且很可能会经常使用它们，因为我知道它们。代码也是我正在寻找的，所以通过一些调整，我应该能够让它工作。感谢您的回复。
一个问题，这可能是一个非常简单的答案，但我如何将它全部放大以填满整个浏览器窗口？
我花了一段时间才找到正确的方向，但让它完美运行似乎相当耗时，而且不像我想象的那么容易。这就是我想出的：JSFiddle。使用上面描述的三角形不是那么可行的方法，因为您不能将边框宽度设置为百分比宽度。无论如何，我希望我的尝试可以帮助你。否则，您可以考虑使用重复的背景图片。

【解决方案2】：

如果它是像素完美的，我会创建一个带有位置的容器：相对并定义宽度和高度并将其设置为溢出：隐藏。然后创建三个要包含在其中的 div，并使用 transform:rotate(XXdeg) 为每个具有 position:absolute 的项目，然后对它们进行 z-index 以相应地相互叠加。试试看吧。

【讨论】：

你能举个例子吗