能稳定落地的只有 polygon()；它支持响应式百分比坐标，适配撕纸边等折线形状，而 path() 在 Safari 16.3 及以下静默失效，且 polygon() 需至少 3 点、注意 content-box 原点与坐标换算。
直接结论：能稳定落地的只有 polygon()；path() 虽然更精确，但 Safari 16.4+ 才真正可用，旧版本静默失效，别赌兼容性。
为什么 polygon() 是唯一靠谱的选择
设计师给的“撕纸边”“对话气泡尾巴”“波浪底栏”，本质都是折线围成的封闭区域——polygon() 正是干这个的。它接受一串 x y 坐标对，单位用 % 就能响应式适配，不用管屏幕尺寸变化。path() 虽支持贝塞尔曲线，但截至 2026 年 10 月，Safari ≤16.3 会把 path("M0,0 Q50,20 100,0") 当成无效声明，DevTools 里直接划掉，且不报错。
- 必须至少 3 个点（如
polygon(0% 0%, 100% 0%, 50% 100%)），少于 3 点整个声明被忽略 - 点顺序无所谓顺/逆时针，但自相交（比如五角星没闭合好）会导致中间镂空，视觉上像“裁穿了”
- 坐标原点永远是元素
content-box左上角，不是设计稿左上角，也不是视口左上角
写 polygon() 坐标时最容易踩的三个坑
不是语法写错，而是坐标理解错或上下文没配对：
- 把 Figma 导出的
24px 36px直接塞进polygon()→ 换个屏幕宽度，所有点全漂移；正确做法是换算成百分比：(24 / 宽度 * 100)% (36 / 高度 * 100)% - 元素有
padding: 20px或border: 5px→polygon()仍从 content box 起算，视觉上“看起来偏了”，实际没错，只是你预期错了 - 移动端 Safari 对小数敏感：
23.54%可能解析异常，换成23.5%或四舍五入到整数更稳
写了 clip-path 却没效果？先查这四件事
90% 的“不生效”跟 polygon() 写得对不对无关，而是渲染上下文断了：
- 父容器没设
overflow: hidden或transform: translateZ(0)→ 裁剪区域溢出，内容照常显示 - 父级是
position: static（默认），子元素用了position: absolute→ 裁剪框可能被截断或消失 - 对
<img>同时用了clip-path和object-fit: cover→ 图像拉伸/偏移不可控，去掉object-fit或改用background-image - 元素没显式宽高（比如
display: inline的<img>）→polygon()百分比无参照，直接失效
box-shadow 和 border 裁不掉？这是浏览器行为，不是你写错了
clip-path 默认只裁“绘制区域”，而 box-shadow 和 border 属于“层外溢出”，尤其 Safari 下几乎肯定露出来：
- 加
isolation: isolate强制创建独立层叠上下文，让裁剪作用域包含阴影和边框 - 用
filter: drop-shadow()替代box-shadow（注意：不支持内阴影） - 别指望
overflow: hidden能兜底——它对box-shadow无效，Safari 尤其明显
真正复杂的地方在于：同一个 polygon() 在 Chrome 里看着完美，在 Safari 里可能因小数精度或坐标解析差异而错位几个像素，这种细节只能靠真机调试，模拟器不够准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
