在CSS中使用PNG剪切

Question

有没有办法用图像叠加效果剪辑div的内容？

我试图使用：background-clip和类似的东西，但似乎无法弄明白！

见到这里：

https://codepen.io/brycesnyder/pen/pwdoWW

我只希望红色显示在灰色图像区域内。

Answer 1

我用实验技术弄明白了。

要将图像用作各种事物的剪切路径，可以使用属性：“mask”

在这里看到： https://developer.mozilla.org/en-US/docs/Web/CSS/mask

但是，你需要加上前缀。

Answer 2

要找到确切的形状需要进行相当多的调整，但您可以使用此处的原则 - https://css-tricks.com/examples/ShapesOfCSS/ - 尤其是border-width和border-radius属性 - 来“塑造”div。 / p>

如果我是你，我会从以下组合开始：

• 金刚石
• 蛋
• 锥

（在上面的css-tricks链接上显示/ css共享的所有形状。）