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

【问题标题】：CSS triangle with color and background-image带有颜色和背景图像的 CSS 三角形
【发布时间】：2021-12-06 20:59:11
【问题描述】：

我制作了一个页面，该页面由具有不同背景颜色的几个部分和一个带有噪声的透明背景图像（透明“PNG 文件”）组成。在每个部分的顶部，我放置了一个三角形div，上面部分的颜色。我还想将噪声图像添加到三角形中，但我不知道如何。

我已经在“CSS”中尝试了border-image 属性，但由于某种原因，它只是擦除了整个三角形..

如果您能帮助我，我将不胜感激。 “This”是我正在开发的网站。

【问题讨论】：

Hope it helps
我刚刚编辑了我的帖子，以获得特定于您的用例的解决方案。

标签： css geometry background-image transparent

【解决方案1】：

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

通用解决方案：

FIDDLE

HTML：

<div></div>

CSS：

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;
}

编辑：您的用例

在您的用例中，您可以考虑将 .arrow-down 旋转 45 度并在部分上设置 overflow:hidden;。（您还需要删除.arrow-down 上的现有边框并为其提供所需的尺寸）

【讨论】：

非常感谢！但我还不能让它工作。在每个不同的三角形上，我设置了一个不同的背景颜色，它应该覆盖透明的背景图像。但是由于某种原因，颜色不会显示或扭曲形状，具体取决于使用的 CSS。我已经更新了 [网站](www.floriskoch.com)
@user3626010 我刚刚浏览了您的网站，看起来您设法实施了我提供的解决方案，干得好。如果有帮助，您能否通过投票/接受此答案来将此问题设置为已回答？
嗯，是的，它现在似乎工作了，非常感谢！但是我仍然不明白为什么我需要使用两个单独的 div（向下箭头和 section-ico）。如果我删除一个，整个事情就会消失。另外，我非常想为你投票，但我似乎需要更多的“声誉”。