Html 带有剪辑路径“多余背景”的三角形；剪辑；？

我已经为SVG和剪辑路径挣扎了一段时间

我正在尝试创建一个三角形剪辑路径，将覆盖一张照片，使顶部有一个“三角形”边

我试图实现与照片完全相同的效果，但三角形“反转”。想象同样的三角形在照片的顶部而不是底部

我将如何实现这一点？我可以用填充颜色创建三角形本身，但它仍然会显示三角形“上方”的图像

在网上找到这个，它完全符合我的要求，但方式不对

<svg class="bigTriangleColor2" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="3 0 97 102" preserveAspectRatio="none">
    <path fill="rgba(255,255,255,1)" d="M0 0 L51 102 L0 103 Z M0 205 L100 103 L100 2 Z"></path>
</svg>

---

尝试使用SVG编辑器，如“Inkskape”（免费）；然后：

• 拖放你的图像，剪辑和遮罩你想要的，然后
• 另存为“普通SVG”
• 在您喜爱的文本编辑器中打开保存的SVG文件，并删除多余的代码，如顶部的“XML”声明和任何其他附加内容
• 将代码复制并粘贴到任何需要的位置

快速、简单、容易；）