带有颜色和背景图像的CSS三角形

我制作了一个页面，由几个不同背景颜色的部分和一个带噪波的透明背景图像（透明的“PNG文件”）组成。在每个部分的顶部，我放置了一个三角形的

div

，与上面部分的颜色相同。我还想在三角形中添加噪声图像，但我不知道如何添加

我尝试了“CSS”中的

边框图像

属性，但由于某种原因，它只是删除了整个三角形

---

如果你能帮助我，我将不胜感激。“”是我正在处理的站点。

您可以使用旋转的伪元素：

通用解决方案：

HTML:

编辑：您的用例

---

在您的用例中，可以考虑旋转<代码>箭头向下>代码> 45度，设置<代码>溢出：隐藏；<代码>在部分上。（您还需要删除

上的现有边框。向下箭头

并为其提供所需的尺寸）

我刚刚编辑了我的文章，以获得特定于您的用例的解决方案。非常感谢！但我还不能完全让它工作。在每个不同的三角形上，我设置了不同的背景色，应该覆盖透明的背景图像。但由于某些原因，颜色不会显示或扭曲形状，这取决于所使用的CSS。我已经更新了[网站]（www.floriskoch.com）@user3626010我刚刚浏览了你的网站，看起来你成功地实现了我提供的解决方案，干得好。如果这个答案有帮助的话，你能通过投票/接受这个答案来回答这个问题吗？是的，它现在似乎起作用了，非常感谢！但是我仍然不明白为什么我需要使用两个单独的div（向下箭头和ico部分）。如果我删除一个，整个东西就会出现。另外，我很想给你们投票，但我似乎需要更多的“声誉”。

<div></div>

div {
    width:200px;
    height:200px;
    overflow:hidden;
}
div:before {
    content:"";
    display:block;
    width:70%;
    height:70%;
    background-image: url(/*Path to your image*/);
    transform: rotate(-45deg);
    transform-origin:0 0;
    -ms-transform: rotate(-45deg);
    -ms-transform-origin:0 0;
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin:0 0;
}