<p>clip-path 可为按钮添加不规则形状，但需满足三条件：按钮设非 static 定位（如 position: relative）、polygon 坐标全用 % 且顺时针闭合、Safari 必须双写 -webkit- 前缀。</p>
clip-path 能直接给按钮加不规则形状，但写错一个百分号、漏掉 position: relative、或 Safari 没加 -webkit-clip-path，按钮就还是方的——不是没生效，是被静默忽略了。
按钮必须设非 static 定位才能触发裁剪
原生 <button> 默认 position: static，Chrome 和 Firefox 会直接跳过 clip-path 解析。这不是 bug，是规范行为。
- 加
position: relative最简有效（不用改布局） - 别用
display: block强覆盖——会导致按钮内文字垂直居中失效 - 如果按钮在 flex 容器里，
align-items: center可能被裁剪区域干扰，建议外层加overflow: visible
polygon() 坐标必须全用 % 且顺时针闭合
写 polygon(0 0, 100px 0, 100px 50px, 0 50px) 看似合理，但在 iOS Safari 上整条声明会被忽略；写 polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%) 才真正跨设备稳定。
- 少于 3 个点无效，比如三角形至少要写三个顶点
- 顺序反了不会报错，而是“裁反了”：本该显示的区域全变透明，看起来像按钮消失了
- 调试时删掉最后一个点再补上，能强制重绘并暴露方向问题
- 小数精度控制在两位以内（如
33.33%），Safari 对33.333%渲染不稳定
Safari 必须双写前缀，且禁用 path()
只写 clip-path: polygon(...)，Safari ≤16.4 会当没这行样式处理；而 clip-path: path("M...") 在 Safari 15.4 之前根本无法解析，写了等于白写。
立即学习“前端免费学习笔记（深入）”；
- 必须同时写：
clip-path: polygon(...); -webkit-clip-path: polygon(...); - 别混用
url(#svg-clip)和 CSSpolygon()——前者需额外维护 SVG，后者更轻量，优先选后者 - 如果要用复杂图形（如星形、波浪边），改用内联 SVG 的
<clipPath>+clip-path: url(#id)，坐标单位设为objectBoundingBox
hover 和 focus 状态下裁剪仍要可用
裁剪后按钮点击热区默认跟着视觉区域走，但某些情况下（比如用了 transform: scale() 或父容器有 overflow: hidden），实际可点击区域会偏移或缩小。
- 确保按钮有明确尺寸：
width和height或min-width/min-height -
:hover改背景色没问题，但别在 hover 里动态改clip-path——动画卡顿且 Safari 不支持过渡 - 键盘
focus时，浏览器默认 outline 会被裁剪截断，加outline-offset: 4px避免看不见焦点框 - 如果按钮含文字，
line-height和padding要手动微调，因为裁剪不改变盒模型，文字可能被切掉
真正难的不是画出那个五边形，而是让它的每个顶点在 DPR=2 的 iPhone、缩放 125% 的 Windows 屏、暗色模式下都对得准——这时候，硬写 px、漏掉 -webkit-、或者随手颠倒坐标顺序，就是最常被跳过的三步。
