clip-path 加在 grid 容器上仅裁剪视觉，不改变子项布局位置；子项仍按原始网格线排列，超出部分被隐藏，hover 和点击区域照常响应。
clip-path 加在 grid 容器上只裁视觉，不改子项位置
给 display: grid 的父容器加 clip-path: polygon(...)，不会让子项自动“缩进”到不规则区域内——它们仍按原始矩形网格线排布，只是超出部分被视觉隐藏。hover 和点击区域照常响应，哪怕你完全看不见那个子项。
常见错误现象：画了个波浪边容器，结果鼠标移到“空白处”却触发了子项的 :hover，以为是 bug，其实是正常行为。
- 若目标是整个网格“看起来有星形外框”，直接对容器加
clip-path就够了，简单高效 - 若要每个子项本身是三角形、六边形并拼接无缝，
clip-path必须单独加在每个子项上，不能偷懒只加容器 - 注意坐标系：默认以 content box 为基准，容器若有
padding或border，polygon()坐标需手动偏移，否则可能把内容裁掉一半
每个子项单独加 clip-path 才能实现蜂窝/斜切等真实不规则分布
Grid 只负责提供行列骨架，真正的“不规则感”来自每个子项自身的形状控制和定位微调。
比如做六边形网格：
立即学习“前端免费学习笔记（深入）”；
- 列宽设为固定值（如
200px），行高设为1.1547 * 200px（即 √3 × 宽度） - 对偶数行子项加
transform: translateX(50%)，制造交错效果 - 每个子项设
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) - 务必加
grid-auto-flow: dense，防止因错位产生空行；子项用grid-column: span 1显式声明跨度
性能提示：大量子项开启 clip-path 会拖慢渲染，建议控制在 100 个以内；必要时加 will-change: transform 提升合成层。
clip-path 坐标必须用百分比，否则响应式就崩了
polygon() 中的坐标值，单位为 % 时是相对于元素 content box 的宽高；用 px 是绝对值，一换屏幕或缩放就错位。
常见错误现象：clip-path: polygon(0 0, 100px 0, 100px 50px, 0 50px) 在手机上裁得只剩一角，在大屏上又露出太多空白。
- 所有顶点坐标统一用
%，例如polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%) - 调试时先写
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)确认基准，再逐步调整 - 移动端 Safari 对小数精度敏感，写
23.5%比23.54%更稳 - Chrome DevTools 的 Styles 面板里可勾选
clip-path可视化图标，拖动顶点实时预览
Safari 兼容必须双写 -webkit-clip-path，且避开 path() 和复杂 inset()
Safari 直到 15.4 才完整支持 CSS 版本的 polygon()，旧版只认 SVG 引用或带前缀写法。别指望 -webkit- 前缀能兼容所有版本——新版已废弃它，反而干扰标准语法。
实操建议：
- 必须双写：
clip-path: polygon(...); -webkit-clip-path: polygon(...); - 禁用
path()语法（Safari 不支持），也避开带贝塞尔圆角的inset()，如inset(0 0 0 0 round 12px 0 0 12px) - 真要保旧版兼容，改用内联 SVG：
<clippath id="star"><path d="M50,0 L61,35..."></path></clippath>，CSS 中写clip-path: url(#star) - 用
@supports (clip-path: polygon(0 0))包裹新特性样式，避免降级时冲突
最易忽略的一点：clip-path 不影响事件区域，也不影响可访问性，但它的裁剪是纯视觉的——如果你依赖“裁掉=不可交互”，那就踩坑了。
