Html 底部带有三角形的div，带有背景图像

我想做一个

div

，底部有一个三角形。 但是我需要三角形上的背景图像，我尝试过使用伪元素（

：after

），但它不起作用

#homebg:after{
    content:'';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 50px #fff;
    border-left: solid 48vw transparent;
    border-right: solid 48vw transparent;
}

我需要使

div

在三角形中显示为

background

：

---

您可以使用剪切遮罩

div {
    -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);
    clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);
}

查看网站，生成自己的面具。

普通颜色上的三角形 如果三角形显示在普通颜色上，则可以将此方法用于绝对定位的伪元素：

div{
位置：相对位置；
背景：url（'http://i.imgur.com/W27LCzB.jpg');
背景尺寸：封面；
最小高度：100px；
填充底部：100px；
溢出：隐藏；
}
部门：之后{
内容：''；
位置：绝对位置；
底部：0；左侧：0；
左边框：50vw实心#fff；
右边框：50vw纯色#fff；
边框顶部：100px实心透明；
}

---

我们只需要

线性梯度
和
遮罩
就可以做到这一点。你可以调整你想要的高度


div{
--三角形高度：100px；/*您可以更改此值*/
--遮罩：线性梯度（#000，#000）0 0/100%计算（100%变量（--三角形高度））无重复，
线性梯度（至右上角，透明49.5%，#000 50%100%）0 100%/50%var（--三角形高度）无重复，
线性梯度（左上角，透明49.5%，#000 50%100%）100%100%/50%var（--三角形高度）无重复；
-webkit掩码：var（--掩码）；
掩码：var（--掩码）；
宽度：500px；
高度：400px；
背景：url(https://i.picsum.photos/id/1043/5184/3456.jpg?hmac=wsz2e0aFKEI0ij7mauIr2nFz2pzC8xNlgDHWHYi9qbc)50%50%/套；
背景重复：无重复；
}
感谢您的建议，不幸的是，它在firefox上不起作用，只在chrome上起作用。还有其他方法可以做到这一点，并且支持跨浏览器。@Adade:您必须为Firefox使用内嵌SVG，因为它还不支持CSS剪辑路径。看一看我在示例问题评论中链接的答案。虽然这里的问题标题有点不同（这会使它不会出现在搜索结果中），但您需要的方法与此答案中使用的方法类似（尤其是剪辑路径）。