clip-path中直接使用var()会静默失效，因polygon()等函数不支持运行时变量插值；可行方案包括：①svg引用+transform绑定变量，②path()中仅calc()内用变量，③attr()绑定svg points（chromium限定）。
clip-path 里直接写 var() 会完全失效
你写 clip-path: polygon(var(--x1) var(--y1), var(--x2) var(--y2))，浏览器不会报错，但整条声明被静默丢弃——DevTools 中该属性显示为 “invalid”，元素也不裁剪。这是因为 polygon()、path() 等函数的参数在 CSS 解析阶段就固定了，不支持运行时变量插值，连 calc(var(--x)) 这种嵌套也无效。
真正能响应变量的三种实操路径
必须把变量作用域下沉到浏览器能动态计算的位置：
- 用
clip-path: url(#myClip)引用内联 SVG，在<clippath></clippath>内通过transform绑定变量，例如：<polygon points="0,0 100,0 100,100 0,100" transform="translate(var(--tx), var(--ty)) scale(var(--s))"></polygon>，再配合transform-box: fill-box和transform-origin: center - 在
path()字符串中仅对calc()内部使用变量，如：clip-path: path("M0,0 L100,0 L100,calc(100vh - var(--gap)) L0,calc(100vh - var(--gap)) Z")—— 注意：Chrome/Firefox 支持，Safari 不支持path() - 用
attr(points)+ 自定义属性绑定 SVG 的points，但仅限 Chromium 117+ 且需开启实验性 flag（chrome://flags/#enable-experimental-web-platform-features），生产环境不推荐
polygon 坐标顺序写反了，不是没效果，是裁反了
顶点顺序决定多边形朝向，而 clip-path 裁的是“多边形以外”的区域。顺序一错，保留和裁掉的部分就完全翻转。
- 所有坐标必须统一按顺时针或逆时针排列，推荐顺时针：
0% 0%, 100% 0%, 100% 100%, 0% 100% - 用 DevTools 实时编辑时，删掉最后一个点再补回去，能强制重绘并暴露方向问题
- 若用 JS 拼接
polygon字符串，注意单位一致性：变量值是--x1: 20%就直接拼，是--x1: 40就得手动加px，否则会被当成40px
Safari 兼容性是最容易被忽略的硬伤
它不支持 path()，对 polygon() 动态坐标容忍度也低；漏写 -webkit-clip-path 前缀会导致整个裁剪失效。
- 必须双写：
clip-path: polygon(...); -webkit-clip-path: polygon(...) - 优先用
inset()或circle()配合百分比，它们在 Safari 中最稳 - 如果用了 SVG
<clippath></clippath>，确保其id在 DOM 中已加载，且未重复；<svg></svg>建议放 HTML 底部或设display: none避免布局干扰
复杂点不在怎么写，而在怎么验证——尤其当变量来自 JS 修改或媒体查询切换时，要立刻检查 DevTools 中 clip-path 是否生效、SVG 的 transform 是否被正确解析、以及 Safari 下是否回退到了矩形。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
