Question

我制作了一个页面，其中包含几个具有不同背景颜色的部分和一个带有噪音的透明背景图像（透明的“PNG文件”）。在每个部分的顶部，我放置了一个三角形div，其颜色与上面的部分相同。我还想将噪声图像添加到三角形，但我无法弄清楚如何。

我在“CSS”中尝试了border-image属性，但由于某种原因，它只删除整个三角形形状。

如果你能帮助我，我将不胜感激。 “This”是我正在制作的网站。

Answer 1

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

通用解决方案：

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三角与颜色和背景图像

1 个答案:

通用解决方案：

编辑：您的用例