如何使用CSS绘制多边形并实现箭头按钮旁的圆形镂空效果

方案1：box-shadow 扩散实现（兼容性最优） #

该方案适合单一点位的规则圆形镂空，无需额外依赖，兼容所有主流浏览器包括IE11：

<!-- 结构示例 -->
<div class="page-background">
  <!-- 你要放在底层的内容/背景 -->
  <div class="overlay">
    <button class="arrow-btn">↑</button>
  </div>
</div>

/* 样式核心代码 */
.overlay {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
.arrow-btn {
  position: absolute;
  top: 120px;
  right: 40px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  font-size: 22px;
  cursor: pointer;
  /* 核心逻辑：用超大扩散半径的阴影覆盖遮罩层除按钮外的所有区域 */
  box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.65);
}

方案2：CSS mask 实现（灵活度最高） #

适合多镂空点位、不规则镂空的场景，支持任意形状的挖空效果，兼容Chrome 4+、Firefox 3.5+、Safari 4+：

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  /* 核心逻辑：定义mask图层，圆形点位设为透明透出底层内容 */
  -webkit-mask: radial-gradient(circle 28px at calc(100% - 40px) 120px, transparent 100%, #000 100%);
  mask: radial-gradient(circle 28px at calc(100% - 40px) 120px, transparent 100%, #000 100%);
}

方案3：SVG 实现（跨端一致性最优） #

适合需要嵌入多端、需要对镂空区域做动画的场景，渲染效果各端完全一致：

<svg width="100%" height="100%" style="position: fixed; inset: 0;">
  <defs>
    <mask id="cutoutMask">
      <rect width="100%" height="100%" fill="#fff"/>
      <!-- 挖空的圆形区域，调整cx、cy、r修改位置和大小 -->
      <circle cx="calc(100% - 40px)" cy="120" r="28" fill="#000"/>
    </mask>
  </defs>
  <rect width="100%" height="100%" fill="rgba(0,0,0,0.65)" mask="url(#cutoutMask)"/>
</svg>

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