Html 用形状css覆盖图像

如何使用css形状遮罩图像

参考图像

我已经做了一个css边框样式的形状，但无法覆盖图像

CSS

#左上角三角形{
宽度：0；
身高：0；
边框顶部：100px纯红；
右边框：100px实心透明；
}

选项1-SVG

---

为此，您可以使用

渐变。下面是一个示例代码：


div{
宽度：100px；
高度：100px；
背景图像：线性渐变（左下角，白色50%，透明0），
url（'http://lorempixel.com/100/100');
}
谢谢，但mozilla不支持我在回答中提到的clip-path。。这就是为什么我添加了SVG解决方案……是的。谢谢SVG工作