你好，
我想知道是否可以在同一元素上使用多个遮罩，就像这样：
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%);
通过这个，我可以只显示元素中相互分离的特定区域。
谢谢。
clip-path是否可以使用多个遮罩？
34
- Cain Nuke
7
不用操作，只需阅读w3c规范或查看教程即可 ;) - G-Cyrillus
有任何解决方法吗？ - Cain Nuke
1也许可以堆叠几个 div 并给每个 div 添加遮罩？或者将遮罩混合成一个单一的遮罩？ - G-Cyrillus
但是如果它们是分开的形状，如何混合它们呢？ - Cain Nuke
请使用类似于 http://cssplant.com/clip-path-generator 的生成器来帮助自己，只需在形状之间手动添加坐标即可。示例：http://codepen.io/anon/pen/pbjjRd - G-Cyrillus
显示剩余2条评论
4个回答
40
如果您使用带有SVG定义的<clipPath>，则这是可能的
.clip-svg {
clip-path: url(#myClip);
}<img class="clip-svg" src="https://picsum.photos/id/1015/600/400">
<svg width="0" height="0">
<defs>
<clipPath id="myClip">
<polygon points="400,50 400,320, 140,300"/>
<polygon points="450,10 500,200 600,100" />
<polygon points="150,10 100,200 300,100" />
</clipPath>
</defs>
</svg>已确认在Chrome 60、Firefox 55和Edge 85中可正常运行。不幸的是，它不适用于IE浏览器。
完整的浏览器支持信息在此。
- Zac
5
我刚在Edge和IE11中测试了你的代码片段，它可以正常工作。我是否忽略了一些支持方面的问题？此外，MDN表示：“以下任意数量的元素，以任何顺序...”，这似乎表明你的解决方案是适当的用法。https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath#Usage_notes - MuffinTheMan
看起来在最近的Edge版本中可以工作，只是3年前不能！我已经在IE11中进行了测试，它只显示整个图像。据我所知，IE11不支持以这种方式在HTML元素上使用clip-path。 - Zac
@Zac，请问你能检查一下我的代码有什么问题吗？它只适用于一个多边形项目，但是对于多个项目则不起作用。 - Sevi
@Zac
`<img src="https://i.stack.imgur.com/iZ7xG.jpg" style="clip-path: url(#myClip);"><svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip" clipPathUnits="objectBoundingBox">
<polygon points="0 0, 0 1, .54 .99, .5682 .156, .746 .151, .7397 .557, .51 .508, .54 .99, 1 1, 1 0" />
<polygon points="0 0, 0 1, .737 1, .747 .321, .816 .321, .81 .666, .74 .645, .74 1, 1 1, 1 0" />
/* 它不能工作，但如果删除其中一个，则只使用一个多边形即可正常工作 */
</clipPath>
</defs>
</svg>` - Sevi
@Zac，https://dev59.com/RHoPtIcB2Jgan1zn5eup - Sevi
5
您还可以使用CSS创建一个多边形，使其进入和离开元素边界。参见以下链接：
https://24ways.org/2018/clip-paths-know-no-bounds/
https://codepen.io/danwilson/pen/zMgrgb
div {
width: 80vmin;
height: 80vmin;
background: hsl(181, 90%, 52%);
clip-path: polygon(30px 20px, 40px 200px, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}<div></div>- jedierikb
2
您可以使用多个遮罩层。但是您不能使用多个剪切路径。您可以在剪切路径上使用“mask”属性以创建多个遮罩层，就像以下示例一样。请注意保留HTML标签。
您可以使用 mask 属性与 clip-path 一起使用来创建多个遮罩层，如下所示：
#parent {
display: flex;
justify-content: center;
align-items :center;
height: 100vh;
width: 100vh;
background: linear-gradient(90deg, black 50%, yellow 50%);
}
.multiple_mask{
height: 200px;
width: 200px;
background: red;
clip-path: polygon(0% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 100%, 50% 50%);
-webkit-mask-image: linear-gradient(45deg, black 50%, transparent 50%), linear-gradient(180deg, black, transparent);
mask-image: linear-gradient(45deg, black 50%, transparent 70%);
}<div id="parent">
<div class="multiple_mask"></div>
</div>希望您能理解。
- Abdullah
2
要使用裁剪路径进行多个裁剪，您需要像使用画板一样思考。您必须完成对象并沿着该线到达下一个对象。然后回到上一个对象，再移动到下一个对象。
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
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接