删除div的特定区域

Question

我有一个问题，我似乎无法绕过头脑。

我有div个内容。我想将此div修剪成非矩形形状。这样我可以通过div的区域看到基础背景，而div本身有一个不修剪的背景。

解释时有点笨拙：

以下是包含图片的div图片，其中background-color位于background-image。我想＆＃34;切断＆＃34;青色的角落让background-image显示出来。

像这样：

我已经设置了Codepen已经实现了第一张图片 - 如果这样可以更容易理解。我想从＆＃34;内部＆＃34;中单独删除所有.cutouts。 div。

到目前为止，我发现clip-path是做这件事的最佳人选，但它似乎与我想要的完全相反。

  

指定要显示的元素的特定区域，而不是显示完整区域。

也许我是愚蠢的，无法看到我如何将其用于我想要的东西。
你们中的任何人都知道如何实现这个目标吗？

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中的示例相同。

请注意Internet Explorer中的剪辑路径currently doesn't work。

Answer 2

这样做的一种方法是简单地创建5个div - 一个中心矩形，每边有另一个长矩形，创建了一个剪辑路径的错觉，我发现这很难处理。

或者，您可以尝试使用剪辑路径生成器，例如clippy。我认为对于这个问题，你会想要一个多边形形状。