Ahmad Shadeed 深入研究了形状“镂空”。想象一个形状，其中有一个较小的形状被挖掉了。以他一贯的全面方式，Ahmad 很好地阐述了这种情况——着眼于使事情复杂化的棘手情况。
首先想到的是 CSS 的 clip-path，因为它具有 circle() 语法，看起来很适合，但不！，我们需要 clip-path: circle() 所做的相反，因为我们不是在这里绘制一个圆形作为剪切路径，而是围绕形状绘制，然后向上进入那个较小的圆形，然后再出来，就像一块饼干被咬了一口。这将我们带到 clip-path: path() 区域，幸运的是，它确实存在，但仍然！，达不到预期，因为 CSS 中的 path() 语法仅适用于固定像素单位，这在流体宽度布局中往往过于限制。
因此，我们使用 clip-path: url("#my-path");（引用一个 <svg> 路径），这正是Ahmad 开始这段旅程的地方。但随后他探索了其他选项，例如 对 mask-image 的巧妙使用 以及直接使用 SVG <mask> 和 <image>，事实证明，这是最佳选择。
这种想法有一种奇怪的方式，不知不觉地进入了前端开发人员的集体意识。Jay 写了 一篇关于形状镂空的非常类似的旅程。同样，问题是
Jay Freestone，“使用 CSS 蒙版进行镂空”
clip-path定义一个可见区域，这意味着，如果您希望除了按钮的一小部分之外的所有部分都可见，您需要定义一个反转原始形状的path或polygon。以下是一个使用 Clippy 演示我的意思。
在这种情况下，polygon() 有潜力，因为它支持 % 单位以实现灵活性（此外，不要错过 Ana 的想法，其中将单位类型混合在多边形中，以实现部分固定、部分流动的概念）。
Jay 的结论是 SVG 具有所有选项中最多的优点
[...] 我总体印象是
mask-composite仍然是更灵活的解决方案，因为它使用任何 SVG 形状作为蒙版变得微不足道，而不仅仅是三角形或简单多边形。很可能您只需要导出 SVG 并将其放入。对clip-path进行反转工程可能会很快变得非常复杂。
