如何使用CSS Clip-path属性剪裁出不规则的网页元素形状？

clip-path polygon()生效需满足三要素：坐标基于元素content box左上角且统一用%单位、顶点按顺时针（或统一逆时针）闭合排列、元素设非static定位且父容器无overflow:hidden；Safari须加-webkit-前缀，否则静默失效。

直接写 clip-path: polygon() 很容易白忙活——真正卡住的不是“怎么画”，而是坐标系理解错、父容器截断、浏览器不认。

clip-path 的 polygon() 坐标到底怎么算

原点永远在元素 content box 左上角，x 向右、y 向下，所有百分比都按当前元素宽高算。比如 polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) 就是原始矩形，不是设计稿里的左上角。

• 别把 Sketch 或 Figma 导出的绝对像素坐标（如 24px 36px）直接塞进 polygon()，一换屏幕尺寸就全偏移
• 调试时先加 clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) 确认基准，再逐点调
• 移动端 Safari 对小数敏感，23.5% 比 23.54% 更稳
• Chrome DevTools 的 Styles 面板里勾选 clip-path 可视化图标，拖点实时看

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

90% 是渲染上下文被破坏，不是语法错。

• 父容器没设 overflow: hidden 或 transform: translateZ(0) → 裁剪区域溢出，内容照常显示
• 父级是 position: static（默认），子元素 position: absolute → 裁剪框可能被截断或消失
• 对 <img> 同时用了 clip-path 和 object-fit: cover → 行为冲突，图像拉伸/偏移不可控
• 元素本身没显式宽高（比如 display: inline 的 <img>），polygon() 百分比无参照，直接失效

Safari 和旧版 Edge 兼容怎么搞

新版 Safari（≥15.4）支持 polygon()，但旧版只认 SVG 引用；Edge ≤18 根本不支持 CSS 版 polygon()。

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

• 别写 -webkit-clip-path —— 新版已废弃，反而干扰标准语法
• 正确做法：内联 SVG + url(#id)，<svg> 必须在 DOM 里（不能外链），且 id 匹配
• 复制这段到 HTML body 开头：

  <svg width="0" height="0" style="position: absolute">
    <defs>
      <clipPath id="star">
        <path d="M50,0 L61,35 L97,35 L68,57 L79,92 L50,70 L21,92 L32,57 L3,35 L39,35 Z"/>
      </clipPath>
    </defs>
  </svg>

• 然后 CSS 写 clip-path: url(#star)
• 用 @supports (clip-path: polygon(0 0)) 包裹样式，老浏览器自动跳过

box-shadow 和 border 裁不掉怎么办

clip-path 默认只裁绘制区域，box-shadow 和 border 属于“绘制层外溢出”，Safari 尤其明显。

• 加 isolation: isolate 强制创建独立层叠上下文，让裁剪作用域包含阴影和边框
• 或者改用 filter: drop-shadow() 替代 box-shadow，它天然受 clip-path 影响
• 注意：动画中慎用 clip-path 连续变化，重绘开销大，FPS 明显下降

最常被忽略的是：视觉裁掉的部分仍响应鼠标事件、仍被屏幕阅读器读取——它只是“看不见”，不是“不存在”。