clip-path: path()搭配geometry-box不生效？MDN参考是否有误？

问题本质原因 #

你写的语法本身符合W3C规范，但Chrome 102及更早版本并未实现path()函数搭配geometry-box参数的解析逻辑，所以整条clip-path规则会被浏览器判定为无效值直接丢弃，这不是你写法的问题。

规范中确实定义了geometry-box（比如border-box、content-box）可以作为基础形状的参考盒模型，让形状坐标参考对应盒模型的尺寸计算，但浏览器对不同形状函数的支持进度不一致：

• inset()、circle()、ellipse()、polygon()这几个形状函数很早就支持搭配geometry-box使用，且本身支持百分比单位，天然可以适配容器缩放。
• path()函数的实现进度滞后，目前所有主流浏览器的稳定版本默认都将path内的坐标作为固定用户单位处理，既不支持直接识别百分比坐标，搭配geometry-box的自动适配逻辑也未落地。

纯CSS实现自适应的可行方案 #

如果暂时不考虑SVG方案，可以通过坐标换算+CSS动态单位实现适配，不需要依赖未落地的浏览器特性：

1. 先确定你设计path时对应的基准容器宽高
2. 将path内所有横坐标换算为相对于容器宽度的比例，纵坐标换算为相对于容器高度的比例
3. 结合calc()和相对视口单位/百分比单位，动态计算每个坐标的实际值

对应你给出的测试代码，原path是基于宽100单位、高110单位的基准画布绘制的，适配100vw*100vh容器的写法如下：

.wholePage {
  width: 100vw;
  height: 100vh;
  background-color: red;
  clip-path: path('M0,0 L100vw,0 V calc(90 / 110 * 100vh) Q calc(27 / 100 * 100vw) 100vh 0 calc(90 / 110 * 100vh)');
}

如果容器尺寸不是视口大小，而是父元素的百分比尺寸，可以结合CSS自定义属性传入容器宽高值做换算，不需要额外写JS监听尺寸变化。

注：目前兼容性最好的自适应裁剪方案仍然是SVG clipPath，设置clipPathUnits="objectBoundingBox"后将path坐标归一化到0-1区间，通过clip-path: url(#clip-id)引用即可完美适配任意尺寸容器，所有现代浏览器均支持该特性。

你之前查阅的文档描述的是规范定义的标准行为，只是浏览器暂未全量落地，等后续Chromium版本补齐该特性后，你最开始写的clip-path: border-box path(...)语法就可以直接实现自动适配，不需要手动换算坐标。

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