实现反向CSS Clip-Path效果——CSS或SVG解决方案

当然可行啦！这种在顶层元素上“挖洞”、透出底层背景的效果，其实有好几种简单的实现方式，我分CSS和SVG两种方案给你唠清楚，新手也能轻松上手👇

方法1：用 CSS Mask 属性（推荐） #

这个方法最直观，原理和你说的clip-path刚好相反：mask里的透明区域会变成洞，让底层透出来；不透明区域会保留顶层元素的颜色。

举个例子，假设你有一个蓝色顶层方块，要在中间挖个圆形洞：

<div class="container">
  <div class="blue-top-layer"></div>
</div>

.container {
  /* 底层背景：可以是颜色、图片，随便换 */
  background: #ffd700;
  width: 400px;
  height: 400px;
}
.blue-top-layer {
  width: 100%;
  height: 100%;
  background: #1e90ff; /* 顶层蓝色 */
  /* 核心：用径向渐变做mask，中间透明部分就是洞 */
  mask: radial-gradient(circle at center, transparent 50px, black 50px);
  /* 兼容webkit内核浏览器（比如Chrome、Safari） */
  -webkit-mask: radial-gradient(circle at center, transparent 50px, black 50px);
}

想挖其他形状？把radial-gradient换成linear-gradient（矩形洞）或者ellipse（椭圆洞）就行，甚至可以用多个渐变组合出复杂的洞！

方法2：反向使用 clip-path #

如果你更熟悉clip-path，也可以用多边形来“圈出”要保留的区域，把洞的部分排除在外。比如要挖一个矩形洞：

.blue-top-layer {
  background: #1e90ff;
  clip-path: polygon(
    0 0, 0 100%, 20% 100%, 20% 20%, 
    80% 20%, 80% 80%, 20% 80%, 20% 100%, 
    100% 100%, 100% 0
  );
}

这个多边形的意思是：保留整个方块，除了中间20%-80%的矩形区域（也就是洞）。不过这种方法对于圆形、椭圆这类曲线形状不如mask方便，适合简单的几何洞。

SVG做挖洞效果也很简单，我给你写两种最基础的写法，一看就懂：

方法1：用 SVG Mask 标签 #

原理和CSS Mask差不多，只是用SVG标签来定义：

<!-- 定义SVG画布大小 -->
<svg width="400" height="400">
  <!-- 第一步：定义mask -->
  <mask id="hole-mask">
    <!-- 白色区域：会显示顶层元素 -->
    <rect width="100%" height="100%" fill="white"/>
    <!-- 黑色区域：会挖洞，透出底层 -->
    <circle cx="200" cy="200" r="50" fill="black"/>
  </mask>

  <!-- 底层背景 -->
  <rect width="100%" height="100%" fill="#ffd700"/>
  <!-- 顶层蓝色方块，应用刚才定义的mask -->
  <rect width="100%" height="100%" fill="#1e90ff" mask="url(#hole-mask)"/>
</svg>

只要修改<circle>的参数，就能换成矩形、椭圆，甚至复杂的路径，灵活度很高。

方法2：用奇偶填充规则（fill-rule="evenodd"） #

这个方法适合把顶层元素做成一个“自带洞”的单一形状，不需要额外的mask标签：

<svg width="400" height="400">
  <!-- 底层背景 -->
  <rect width="100%" height="100%" fill="#ffd700"/>
  <!-- 顶层带洞的蓝色形状 -->
  <path 
    d="M0 0 L400 0 L400 400 L0 400 Z M200 200 m-50 0 a50 50 0 1 0 100 0 a50 50 0 1 0 -100 0 Z"
    fill="#1e90ff"
    fill-rule="evenodd"
  />
</svg>

解释一下：d属性里的第一部分是画大矩形（M0 0 ... Z），第二部分是画中间的圆（M200 200 ... Z）。fill-rule="evenodd"会让内外路径交叉的区域（也就是中间的圆）变成洞，完美实现你要的效果！

内容的提问来源于stack exchange，提问作者pjk_ok