clip-path 的 polygon() 过渡默认不生效，因 CSS 规范不支持顶点数或单位不同的插值；需顶点数、单位（推荐全用%）、顺序严格一致，或改用 SVG clipPath 预定义方案实现兼容过渡。
clip-path 的多边形过渡为什么默认不生效？
直接写 clip-path: polygon(0 0, 100% 0, 100% 100%) → clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) 并加 transition: clip-path 0.3s，浏览器不会平滑变形——因为 CSS 规范明确要求 clip-path 的 polygon() 函数**不支持插值过渡**（除非所有顶点数量、单位类型完全一致）。
常见错误现象：clip-path 突然跳变，或干脆无动画；DevTools 里能看到属性更新了，但视觉没变化。
- 顶点数必须严格相等：起点 3 个点，终点也得是 3 个点（哪怕其中一个是冗余的“假顶点”）
- 单位要统一：不能混用
%、px、vw；推荐全用%适配响应式 - 顶点顺序必须一致：顺时针/逆时针不能变，否则插值方向错乱，可能翻转或自交
用 path() 替代 polygon() 实现真正可过渡的变形
clip-path: path("M0,0 L100,0 L100,100 Z") 是可行路径，但注意：目前仅 Chromium 内核（Chrome 120+、Edge 120+）原生支持 path() 的过渡，Firefox 和 Safari 仍不支持。所以它不是跨浏览器解法，而是「高保真 Morphing」的前置条件。
如果你只面向现代 Chrome/Edge，且需要精确控制曲线（比如贝塞尔过渡），path() 是唯一选择：
立即学习“前端免费学习笔记（深入）”；
div {
clip-path: path("M0,0 L100,0 L100,100 L0,100 Z");
transition: clip-path 0.4s ease-in-out;
}
div:hover {
clip-path: path("M20,0 Q50,-20 80,0 L100,30 Q100,60 80,90 L20,90 Q0,70 0,40 Z");
}
⚠️ 注意：path() 中坐标单位是“用户坐标系”，默认以元素左上角为 (0,0)，宽高为 100×100（即百分比需手动换算成数值，如 50% → 50）。
兼容方案：用 SVG <clipPath> + CSS 过渡 class 切换
最稳定、兼容所有现代浏览器的做法：把多边形定义在 SVG 中，用 ID 引用，再通过 class 控制 clip-path 的引用目标。SVG 内部的 <polygon> 或 <path> 可以用 JS 动态更新，或预设多个 <clipPath> 并切换。
示例结构：
<svg width="0" height="0" style="position: absolute">
<defs>
<clipPath id="clip-triangle">
<polygon points="0,0 100,0 50,100" />
</clipPath>
<clipPath id="clip-diamond">
<polygon points="50,0 100,50 50,100 0,50" />
</clipPath>
</defs>
</svg>
div {
clip-path: url(#clip-triangle);
transition: clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
div.morph-to-diamond {
clip-path: url(#clip-diamond);
}
- 必须确保 SVG 在 DOM 中（哪怕
width="0"），否则url(#id)失效 - 两个
<polygon>的points顶点数要一致（这里都是 4 个），否则 Firefox 下会跳变 - 用
cubic-bezier()调动画节奏，比ease更可控
性能和响应式要注意什么？
clip-path 变形本身不触发布局（layout），但频繁重绘复杂路径会影响合成层性能，尤其在移动端。
- 避免在
:hover上直接写大段polygon()字符串——改用预定义 SVG ID 引用，减少样式计算开销 - 响应式场景下，别用固定
px值写clip-path；SVG 中用viewBox="0 0 100 100"+ 百分比points，再让容器width: 100% - Safari 对
clip-path的硬件加速支持较弱，复杂 morphing 可能掉帧；可加will-change: clip-path提前提示，但慎用（内存开销）
真正难的不是写出两个形状，而是让它们的拓扑结构对齐——顶点数、顺序、单位、甚至是否闭合（Z 或最后一组坐标是否回到起点），任意一项不匹配，过渡就失效。这不像 transform 那样宽容。
