CSS如何实现不规则形状切割？利用clip-path属性定义路径

clip-path坐标系原点在元素content box左上角，且不受position、transform影响；失效主因是父容器overflow:hidden截断或定位上下文缺失。

直接说结论：用 clip-path 实现不规则形状切割，核心不是“怎么画”，而是“坐标系怎么算、父容器怎么配、浏览器怎么扛”。写对了 polygon() 却没效果，90% 是被 overflow: hidden 截断或定位上下文缺失坑了。

clip-path 的坐标系默认从哪开始？

clip-path 所有函数（polygon、circle、ellipse）的坐标原点都在元素自身的 content box 左上角，且完全不受 position、transform 影响——它只认元素自己的宽高。

• polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) 就是原始矩形，100% 指该元素当前计算出的 width/height
• 如果元素有 padding: 20px 或 border: 5px solid，裁剪区域仍从 content box 左上角起算，视觉上会“看起来偏移”
• 想让圆形居中，别只写 circle(50% at 50% 50%)，先确认元素是 display: block 或 inline-block，且没被 vertical-align 拉歪基线

为什么写了 clip-path 却没裁剪效果？

最常见失效场景不是语法错，而是渲染上下文被破坏。尤其在绝对定位或动画中，clip-path 很容易“失联”。

• 父容器没设 overflow: hidden 或 transform: translateZ(0) → 裁剪区域溢出，内容照常显示
• 父级是 position: static（默认），而子元素 position: absolute → 裁剪框可能被截断或整个消失
• 对 <img> 直接加 clip-path 后又设 object-fit: cover → 两者行为冲突，图像拉伸/偏移不可控
• Firefox 中用 polygon() 做 transition 动画 → 极大概率卡顿或不动，它对硬件加速支持弱

百分比 vs 像素值：什么时候该用哪个？

clip-path 的 polygon()、circle() 等函数内部不接受 px 单位（inset() 除外）。所谓“像素值”，实际只有两种可靠路径：

立即学习“前端免费学习笔记（深入）”；

• 响应式场景一律用百分比：polygon(0% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%)，配合 box-sizing: border-box 更稳
• 需要像素级对齐（如贴合图标尺寸、UI组件固定宽高），改用内联 SVG：<clipPath id="star"><path d="M50,0 L61,35 L98,35 L68,57 L79,91 L50,70 L21,91 L32,57 L2,35 L39,35 Z"/></clipPath>，再通过 clip-path: url(#star) 引用
• 误写 polygon(0px 0px, 100px 0px, ...) → 大部分浏览器忽略整条声明，静默失败

真正难的不是写出一个五角星，而是当它嵌在 flex 容器里、又被 transform 缩放、还要在 Safari 和 Firefox 里表现一致时，哪些细节会被漏掉——比如 clip-path 不继承、不触发重绘、不响应 will-change，这些都不是报错，而是无声失效。