带剪辑路径的三角形 ||过度“剪辑”的背景？答案

【问题标题】：Triangle with clip-path || Background for excess "clipping"?带剪辑路径的三角形 ||过度“剪辑”的背景？
【发布时间】：2016-08-03 19:49:33
【问题描述】：

我一直在为 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>

【问题讨论】：

clip path generator

标签： html css svg clip-path

【解决方案1】：

尝试使用 SVG 编辑器，例如“Inkskape”（它是免费的）；那么：

拖放您的图像、剪辑和遮罩您想要的任何东西，然后
另存为“普通 SVG”
在您喜欢的文本编辑器中打开保存的 SVG 文件并删除多余的代码，例如顶部的“XML”声明以及任何其他额外内容。
将代码复制并粘贴到任何你想要的地方

快速、简单、容易;)

【讨论】：