如何使用CSS clip-path: polygon()实现指定复杂多边形效果？

可行实现思路如下 #

一、纯CSS方案（优先推荐，固定尺寸场景适用）

1. 如果你能接受用clip-path: path()代替polygon()，实现成本最低，也能保证圆弧顺滑：
   你可以直接把计算好的圆形参数转换成SVG路径命令，比如宽w高h的矩形，按你的公式算出直径d = w*w/(4*h) + h，圆心坐标为(w/2, d/2)，要得到「矩形内被圆覆盖的区域」的话，路径写法示例如下，实际使用时把w、h、d/2替换成具体数值即可，单位用px或者百分比都可以：

.target-element {
  clip-path: path('M0,0 Lw,0 Lw,h A{d/2} {d/2} 0 0 1 0 h Z');
}

如果需要兼容低版本浏览器，可以单独写SVG的<clipPath>定义，再在CSS里通过ID引用即可，效果完全一致。

2. 如果你必须用polygon()实现：
   因为polygon()只能生成直线段组成的图形，你需要把圆弧拆成N个小直线段的顶点，拆分段数一般设为20~50就能保证肉眼看不到锯齿。如果用evenodd规则的话逻辑会更简单：先写外层矩形的四个顶点，再写要镂空区域的闭合顶点列表，evenodd规则会自动把两个路径重叠的区域镂空，不需要手动算布尔运算后的顶点。写法示例：

.target-element {
  clip-path: polygon(evenodd, 
    0 0, 100% 0, 100% 100%, 0 100%, /* 外层矩形顶点 */
    /* 这里补你要镂空的区域的顶点列表，比如顶部要挖掉的部分的顶点 */
  );
}

二、JS动态方案（适配宽高动态变化的场景）

如果你的容器宽高是不固定的，用JS动态计算参数即可：

1. 先获取容器的实时宽高，代入你的公式算出直径d、圆心坐标(cx, cy) = (width/2, d/2)
2. 如果用polygon()实现，直接用三角函数采样圆弧上的点即可，示例代码：

function generatePolygonPoints(width, height, segment = 30) {
  const d = width * width / 4 / height + height;
  const r = d / 2;
  const cx = width / 2;
  const points = [];
  // 先加顶部两个顶点
  points.push('0 0');
  points.push(`${width}px 0`);
  points.push(`${width}px ${height}px`);
  // 采样圆弧上的点，从右下角到左下角
  for(let i = 0; i <= segment; i++) {
    const rad = Math.PI * (i / segment);
    const x = cx + r * Math.cos(rad);
    const y = cy + r * Math.sin(rad);
    points.push(`${x}px ${y}px`);
  }
  points.push(`0 ${height}px`);
  return points.join(',');
}
// 调用后把返回值赋值给元素的style.clipPath即可

3. 如果要使用evenodd规则简化，只需要额外生成要镂空区域的顶点添加到数组末尾即可，不需要手动做路径合并。

补充说明 #

• polygon()的evenodd规则本质是判断点被路径包围的次数，奇数就填充，偶数就镂空，适合有多个镂空区域的复杂形状，确实能大幅降低顶点计算的复杂度，你的场景可以放心使用。
• 如果要实现多个拱形拼接的复杂形状，逻辑完全一致，按顺序拼接多个圆弧的顶点即可，用evenodd规则的话逐个添加要镂空的路径即可，不需要做复杂的路径合并计算。

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