clip-path 会同步裁剪点击区域，是 w3c 规范行为而非 bug；其作用于绘制与事件响应双层面，pointer-events 无效；解决方法是视觉与交互分离：用子元素裁剪、父容器响应事件，或改用 mask-image、svg path 等方案。
clip-path 会同步裁剪点击区域，不是 bug 是规范行为
写了 clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%)，下半部分点不到？这不是样式没生效，也不是 JS 逻辑错了——浏览器直接把裁剪区域外的像素从命中测试（hit testing）中剔除了。Chrome、Firefox、Safari 行为完全一致，W3C 规范明确要求：clip-path 作用于「绘制区域 + 事件响应区域」两个层面。
pointer-events: auto / all / visible 都无效
加 pointer-events: auto 没用，因为事件分发前裁剪已发生；设成 all 或 visible 同样无效——这些值只控制“是否接收事件”，不改变“哪些像素参与事件判定”。真正起作用的是裁剪路径本身定义的几何边界。
- 伪元素（
::before/::after）也会被一并裁剪，即使它本该在裁剪区外 -
display: inline元素未显式设宽高时，百分比坐标无参照，裁剪区域极窄，几乎无法点击 - 配合
transform: scale()使用时，polygon 百分比坐标按缩放前尺寸计算，热区与视觉严重错位
想保留全区域点击，得绕开 clip-path 的事件裁剪机制
核心思路是：让视觉裁剪和事件响应分离。不要指望“修复”裁剪后的点击，而是把裁剪和交互拆到不同层级。
- 把
clip-path移到子元素上（如<img>），父容器保持完整矩形、可点击 - 用
mask-image替代：mask-image: linear-gradient(to bottom, black 50%, transparent 50%)—— 只影响视觉，不干扰事件（Chrome 75+、Safari 15.4+ 支持） - 对需要精确形状交互的场景（如气泡箭头、斜角按钮），放弃
clip-path，改用overflow: hidden+ 绝对定位子元素模拟形状
真要匹配裁剪形状做点击热区，必须用 SVG path 叠加
纯 CSS 无法实现像素级匹配的热区。唯一可靠方案是：clip-path 保留在目标元素上，同时在其上方叠一层 <svg></svg> + <path></path>，且 path 的 d 属性必须与 CSS 中的 polygon 坐标严格一致（注意单位换算：CSS 百分比需转为 SVG viewBox 内数值）。
- SVG
<path></path>必须设fill="transparent"和stroke="none"，否则遮挡内容 - SVG 容器需与目标元素宽高一致，并用
position: absolute; top: 0; left: 0对齐 - 别信
pointer-events: polygon—— 这个值从未被任何浏览器支持，是已废弃草案
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
