clip-path会同步裁剪视觉与事件响应区域，非bug而是规范行为；裁剪外区域无法响应hover/click/focus，chrome/firefox/safari一致；需视觉裁剪但保留全交互时应改用overflow:hidden、mask-image或拆分裁剪与事件容器。
clip-path 会裁剪整个元素的绘制区域，包括事件响应区域——不是“看起来被切了但还能点”，而是浏览器直接把裁剪外的部分从命中测试（hit testing）中剔除。所以裁剪后点不到，是正常行为，不是 bug。
为什么 clip-path 后点击区域变小甚至消失？
根本原因是：CSS 的 clip-path 不仅影响视觉渲染，还同步作用于 pointer events 的判定边界。裁剪掉的像素，连鼠标悬停、点击都收不到。
- 常见现象：
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%)做上半矩形，结果下半部分完全无法点击 - 伪元素（
::before/::after）也被一并裁剪，即使它本该在裁剪区外 -
pointer-events: auto是默认值，加了也没用；设成all或visible无效，因为裁剪发生在事件分发前
如何恢复可点击区域？
不能靠改 pointer-events，得绕开裁剪对事件的影响路径：
- 把
clip-path挪到子元素上，父容器保持完整可点击区域（例如：父div无裁剪 +position: relative，子img加clip-path） - 用
mask-image替代：mask-image: linear-gradient(to bottom, black 50%, transparent 50%)—— 它只影响视觉，不干扰事件（Chrome 75+、Safari 15.4+ 支持） - 对需要精确交互的区域（如气泡箭头、斜角按钮），放弃
clip-path，改用overflow: hidden+ 绝对定位子元素模拟裁剪形状
哪些写法会让点击失效更隐蔽？
这些组合容易让人误以为“样式没问题，只是逻辑错了”：
- 父容器用了
clip-path，又在内部用::after画装饰图形 → 伪元素被裁剪，且无法单独设置事件 - 元素本身是
display: inline，未显式设display: block或inline-block→ 裁剪生效但事件区域极窄，几乎点不到 - 配合
transform: scale()或zoom使用 → 百分比坐标重算异常，裁剪边界和点击热区错位 - 在
table、td上直接应用clip-path→ 旧 Chrome 对表格盒模型处理混乱，事件区域可能塌缩为 0
真正关键的不是“怎么让裁剪后还能点”，而是“哪个层级该承担裁剪，哪个该保留交互”。多数情况下，把视觉裁剪和事件容器拆开，比硬调 pointer-events 更可靠。iOS Safari 和 Android WebView 尤其吃这套逻辑——它们对 clip-path 的事件处理一致性远低于 Chrome Desktop。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
