添加多边形作为css背景

我想要一个div，上面部分有一个黑色背景，是一个多边形（0,100%0,100%780px，0,670px）。这个div背景的另一部分应该是白色的。我该怎么做呢？

当你说多边形时，你是指剪辑路径多边形吗

也许是这样的？我任意地将DIV设置为1000x1000

.polygon bg
{宽度：1000px；
高度：1000px；
位置：相对位置；
}
.多边形bg:：之前
{背景色：石灰；
内容：“；
剪辑路径：多边形（0,100%0,100%780px,0 670px）；
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
}
.多边形背景.内容
{位置：相对位置；
z指数：2；
}

一些文字。。。

对于这样的简单形状，您可以在背景图像CSS声明中使用线性渐变，因为您可以有任意多个“图像”，用逗号分隔，每个图像都有自己的位置

你的形状是一个长方形，下面有一个三角形。我们不必使用不同的颜色彼此合并，只需使用黑色作为开始颜色和结束颜色

下面是创建一个名为polygon的类的代码片段，该类将使div的背景色为白色，并覆盖一个黑色多边形

.polygon{
宽度：400px；/*根据需要设置*/
高度：1024px；
背景：
线性梯度（黑色、黑色）顶部/100%670px，
线性渐变（左下角，黑色50%，透明50%）0px 670px/100%110px；
背景色：白色；
背景重复：无重复；
}

---

这是一个很好的绘制多边形的示例，但是如何最好地将其作为div的背景呢？我们需要把它放在主div后面的一个div中吗？@AHaworth，把内容放在div中就行了。@Linux4Life531是的，如果你能修改HTML（这个问题只标记CSS，但我想如果是他们的，他们可以修改HTML），这是一种更清晰的绘制方式（使用剪辑路径）比我的答案中的背景图像方式，在那里杂耍透明和其他颜色不是很明显。我编辑了上面的代码。“剪辑路径”（Clip path）将切断内容，但如果将其用作before元素并绝对定位，则它可以工作。只是要确保有任何内容，你可能想重叠它的位置相对较高的z-索引。为了使文本更容易看到，我将bg颜色改为石灰色，但显然可以进行颜色调整。