Html 如何更改div的形状

我想知道如何用CSS改变div的形状。我对它做了一些研究，发现了“歪斜”选项，但是，我所看到的示例中没有一个给出我想要的形状。这是我正在寻找的图像

---

如果它是像素完美的，我会创建一个带有position:relative的容器，定义宽度和高度，并将其设置为overflow:hidden。然后创建三个要包含在其中的div，并使用transform:rotateXXdeg为每个项目使用position:absolute，然后对它们进行z索引以相应地相互覆盖。试一试。

有许多不同的方法，学习CSS时最好自己尝试。因此，在了解以下方法之前，我建议先了解以下资源：

.图案栏{ 位置：相对位置； 溢出：隐藏； 背景：darkgrey； 宽度：60px； } .图案栏分区{ 宽度：0； 身高：0； 边框顶部：50px实心透明； 右边框：100px实心暗色； 边框底部：50px实心透明； 左边距：-40px； 利润上限：-30px； } .pattern列div:n-child2n{ 左边框：100像素纯色灰色； 右边界：0； 左边距：0； } .pattern列div:nth-child3n{ 右边框颜色：ccc； 左边框颜色：ccc； }

---

这里的示例向您展示了它是如何工作的，以便您可以根据自己的需要进行调整。这就是你学习新事物的方式，而不是通过复制粘贴。我看过这些链接，现在我了解了它们，很可能会大量使用它们。代码也是我想要的，所以稍加调整，我应该能够让它工作。谢谢你的回答。有一个问题，它可能是一个非常简单的答案，但我如何将其放大以填满整个浏览器窗口？我花了一段时间才找到正确的方向，但要使其完美工作似乎相当耗时，而且不像我想的那么容易。这就是我想到的：。使用如上所述的三角形不是一个好办法，因为您不能将边框宽度设置为百分比宽度。无论如何，我希望我的尝试能帮助你。否则你可以考虑使用重复的背景图像。你能举个例子吗