是否可以有多个带有剪辑路径的蒙版？

Question

你好，

我想知道是否可以在同一个元素上使用多个掩码，就像这样：

 clip-path:polygon(8% 0%, 8% 7%, 14% 12%), polygon(96.4%, 92% 96.4%, 97% 92.3%), polygon(97% 15%, 99% 13%, 99% 0%);

有了这个，我将能够只显示元素的某些相互分离的区域。

谢谢你。

原文由 Cain Nuke 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要将剪辑路径用于多个剪辑，您需要将其视为 etch-a-sketch。您必须完成该对象并按照该线到达下一个对象。然后在移动到下一个对象之前返回到上一个对象。

 img {
        clip-path: polygon(14% 12%, 8% 0%, 8% 7%, 14% 12%, 87% 96.4%, 92% 96.4%, 97% 92.3%, 87% 96.4%, 14% 12%, 97% 15%, 99% 13%, 99% 0, 97% 15%, 14% 12% );
    }

 <img class="clip-svg" src="https://picsum.photos/id/1015/600/400"/>

原文由 aaronwcasteel 发布，翻译遵循 CC BY-SA 4.0 许可协议