javascript - 删除 div 的特定区域

Question

我有一个问题似乎无法解决。

我有一个包含内容的div。我想将这个 div trim 成非矩形形状。这样我就可以通过 div 的区域看到底层背景，而 div 本身有一个未 trim 的背景。

解释起来有点笨拙:

这是包含图像的 div 的图片，它有一个 background-color，同时位于 background-image 上。我想“切断”青色 Angular ，让 background-image 从那里显示出来。

像这样:

我已经设置了一个 Codepen已经实现了第一张图片 - 如果这样更容易理解的话。我想从“内部”div 中单独删除所有 .cutouts。

到目前为止，我找到了 clip-path作为这样做的最佳人选，但它似乎与我想要的完全相反。

Specify a specific region of an element to display, rather than showing the complete area.

也许我很笨，看不出我怎么能用它来做我想要的。
你们中有人知道我如何实现这一目标吗？

Answer 1

想到的最简单的解决方案是使用具有透明度的 png 图像。不确定这是否适合你，但如果你跟踪可见区域路径中的点，你实际上可以使用 clip-path: polygon(...) ，基本上是这样的:

+--3----------4--+
|  |          |  |
1--2          5--6
|                |
|                |
12-11         8--7
|  |          |  |
+--10---------9--+

其中每个数字代表路径上的一个点。所以按照 clip-path: polygon(0 5%, 5% 5%, 5% 0, 95% 0, 95% 5%, 100% 5%, 100% 95%, 95% 95 %, 95% 100%, 5% 100%, 5% 95%, 0 95%)，请参阅我的 forked codepen 中的示例.

请注意 clip-path currently doesn't work在 Internet Explorer 中。