CSS变量无法在polygon()中使用，因规范禁止且解析阶段早于var()展开，导致整条clip-path声明失效；需改用SVG clipPath、transform组合或动态生成字符串方案。
不能直接用 CSS 变量插值到 polygon() 里——浏览器会整条声明丢弃，DevTools 里显示为 invalid 或直接划掉。这是硬限制，不是写法问题。
为什么 var(--x) 在 polygon() 中完全不生效
CSS 规范明确禁止在 polygon() 参数中使用自定义属性（var()）。哪怕只在一个坐标里写 var(--top)，整个 clip-path: polygon(...) 声明都会被忽略。
- 现象：DevTools Styles 面板中该行带 strikethrough，或标为
invalid property value - 原因：
polygon()的参数解析发生在 CSS 属性计算早期，此时var()尚未展开，语法校验直接失败 - 对比：
transform: translateX(var(--dx))可以，因为transform支持 runtime 计算；polygon()是静态路径定义，不支持运行时插值
想动态控制裁剪形状，必须换方案
真要响应鼠标、滚动或状态变化来改裁剪区域，得绕过 polygon() 直接插值这条路：
- 用
url(#id)引用 SVG<clippath></clippath>，再用 JS 动态改<path d="..."></path>的d属性（注意：DOM 操作后需触发重绘） - 对简单位移/缩放，改用
transform+ 固定polygon()组合，比如把三角缺口卡片整体 translate，而不是动顶点坐标 - 极端情况可 JS 生成内联 style 标签，拼出完整
clip-path: polygon(…)字符串并注入（不推荐，维护成本高）
Safari 和 Firefox 下的兼容性陷阱
即使你放弃变量、老老实实写死百分比，也得防着浏览器“认错数”：
立即学习“前端免费学习笔记（深入）”；
- Safari ≤15.6：把
50% 50%解析成50px 50px，必须双写-webkit-clip-path: polygon(...)+clip-path: polygon(...) - Firefox 不支持
path()函数，且对url(#id)要求<svg></svg>必须在当前 HTML 文档内（不能外链或 shadow DOM） - 所有浏览器都不吃小数精度太高：写
23.5%比23.543%更稳，尤其在移动端
真正卡住人的从来不是“怎么画那个形状”，而是误以为变量能像在 color 或 margin 里那样自由使用——它在这里就是个语法禁区，得提前绕开。
