CSS技术问题：如何裁剪/消除下层元素的重叠像素？

下面是示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #a {
      position: relative;
    }

    #a div {
      width: 100px;
      height: 100px;
      position: absolute;
    }

    #b {
      background-color: green;
      left: 0;
      top: 0;
    }

    #c {
      left: 20px;
      top: 20px;
      background-color: red;
    }
  </style>
</head>
<body>
    <div id="a">
      <div id="b"></div>
      <div id="c"></div>
    </div>
</body>
</html>

需求说明：将红色矩形设为透明，同时真正删除绿色矩形与红色矩形重叠区域的像素（禁止用白色填充重叠区域模拟，必须实现像素级移除）。

当前效果：

目标效果：

解决方案1：使用clip-path裁剪绿色矩形 #

通过clip-path: polygon()精确定义绿色矩形的显示区域，排除与红色矩形的重叠部分：

#a {
  position: relative;
}

#a div {
  width: 100px;
  height: 100px;
  position: absolute;
}

#b {
  background-color: green;
  left: 0;
  top: 0;
  /* 按坐标点依次定义非重叠区域 */
  clip-path: polygon(0 0, 100% 0, 100% 20px, 80px 20px, 80px 80px, 20px 80px, 20px 100%, 0 100%);
}

#c {
  left: 20px;
  top: 20px;
  opacity: 0; /* 将红色矩形设为透明 */
}

解决方案2：使用CSS Mask实现区域排除 #

利用mask和mask-composite属性，直接排除绿色矩形的重叠区域，写法更简洁：

#a {
  position: relative;
}

#a div {
  width: 100px;
  height: 100px;
  position: absolute;
}

#b {
  background-color: green;
  left: 0;
  top: 0;
  /* 基础遮罩覆盖整个矩形，第二个遮罩标记重叠区域，通过exclude排除该区域 */
  mask: 
    linear-gradient(black, black),
    linear-gradient(black, black) 20px 20px / 80px 80px no-repeat;
  mask-composite: exclude;
}

#c {
  left: 20px;
  top: 20px;
  opacity: 0;
}

以上两种方案都真正移除了绿色矩形重叠区域的像素，符合需求，且无需额外DOM元素。

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