绝大多数情况下用 polygon()，因其语义清晰、兼容性好；path() 在 CSS 中支持极差，仅 Safari 15.4+ 实验性支持且不支持相对路径指令。
clip-path 画斜切网格项时，用 polygon() 还是 path()？
绝大多数情况下用 polygon() 就够了，它语义清晰、兼容性好（Chrome 55+/Firefox 54+/Safari 15.4+），而 path() 在 CSS 中支持极差（目前仅 Safari 15.4+ 实验性支持，且不支持 SVG 路径语法中的相对指令）。斜切本质是四边形顶点偏移，polygon() 直接写坐标最稳。
常见错误是把斜切角度硬编码成固定像素值，比如 polygon(0 0, 100% 0, calc(100% - 20px) 100%, 20px 100%) —— 这样在不同宽高比下切口会错位。正确做法是用比例或 vw/vh 单位锚定斜率。
- 推荐写法：
polygon(0 0, 100% 0, 100% 100%, 0 100%)是默认矩形；斜切只需改最后两个点的 x 偏移，比如右下角向左移 15%，左下角向右移 15%：polygon(0 0, 100% 0, 85% 100%, 15% 100%) - 想动态控制斜度？用 CSS 自定义属性：
--skew: 15%;，然后polygon(0 0, 100% 0, calc(100% - var(--skew)) 100%, var(--skew) 100%) - 别用
clip-path: inset()模拟斜切——它只能做直角裁剪，强行旋转容器反而增加重排开销
Grid 容器里每个 item 都要单独 clip-path 吗？
是的，clip-path 作用于单个元素盒模型，不能直接作用于 Grid 轨道或伪类。但可以避免逐个写：用 :nth-child() 批量控制，或用 CSS 类配合 JS 动态添加。
典型踩坑是给 grid-container 加 clip-path，结果整个容器被裁，子项全部消失——因为裁剪的是容器自身的边界框，不是子项布局流。
立即学习“前端免费学习笔记（深入）”；
- 必须对每个
.grid-item单独设置clip-path - 奇偶行斜切方向相反？用
.grid-item:nth-child(odd)和.grid-item:nth-child(even)分别定义不同polygon() - 如果网格项高度不一致，斜切后底部对不齐，建议统一设
height或用aspect-ratio锁定宽高比
clip-path 斜切后，鼠标事件和可访问性还正常吗？
视觉上被裁掉的部分，仍参与事件捕获和无障碍树——也就是说，用户能点中“看不见”的区域，屏幕阅读器也会读出完整元素内容。这不是 bug，是规范行为。
这导致两个实际问题：一是误触（比如斜切后右下角空白区仍可点击），二是语义冗余（被裁掉的文本节点还在 DOM 中）。
- 防误触：加
pointer-events: none到裁掉的区域？不行，clip-path不影响 pointer-events 分布。稳妥做法是用overflow: hidden+ 容器内缩放/位移，或改用mask-image（但兼容性更差） - 可访问性优化：如果裁掉的内容纯属装饰（如背景色块），把它做成伪元素
::before，主元素只保留语义内容 - 测试方法：打开浏览器开发者工具的“渲染”面板，勾选 “Paint flashing”，看点击热区是否超出视觉范围
移动端 Safari 上 clip-path 斜切突然失效？
大概率是 Safari 对 clip-path 的硬件加速限制触发了回退：当元素有 transform、filter 或 position: fixed 时，某些版本 Safari（尤其是 iOS 15–16）会静默禁用 clip-path。
另一个隐蔽原因是 viewport 缩放或字体加载导致 layout shift，让 polygon 坐标计算错乱——尤其用 rem 或 em 单位时。
- 保底方案：用
@supports (clip-path: polygon(0 0))做特性检测，降级为 border + transform 拼斜角（精度低但稳定） - 避免复合条件：不要同时给 item 加
transform: scale(0.99)和clip-path，Safari 很容易丢裁剪 - 真机调试必做：在 iOS 设置 → 辅助功能 → 显示与文字大小 → 关闭“更大字体”，否则系统字体缩放会干扰 polygon 百分比计算
事情说清了就结束。真正难的不是写出斜切，而是让斜切在缩放、滚动、横竖屏切换、字体加载过程中始终对得上像素——这时候往往得放弃纯 CSS，转而用 ResizeObserver 监听尺寸再重算 polygon() 坐标。
