伪元素::before或::after无法创建真正不规则点击区域，因浏览器事件系统仅支持轴对齐矩形热区；视觉上的不规则需通过多个伪元素拼接矩形热区并配合pointer-events:none与z-index:-1实现，但需注意定位、兼容性及可访问性问题。
伪元素 ::before 或 ::after 本身不能直接定义不规则点击区域——浏览器只按矩形热区判定，所谓“不规则”，本质是用视觉遮罩 + 矩形热区组合模拟出来的错觉。真要支持非矩形交互，得靠 SVG 或 clip-path 配合 pointer-events，但兼容性和维护成本高；CSS 伪元素方案只适合“看起来不规则、实际仍是矩形扩展”的场景。
为什么伪元素画不出真正不规则的可点击区
点击热区永远是轴对齐矩形（axis-aligned rectangle），这是浏览器底层事件系统决定的。哪怕你用 radial-gradient 或 clip-path 把 ::before 剪成花瓣状，iOS Safari 仍只响应其包围盒（bounding box）内的触摸——也就是它原本那个看不见的矩形框。这不是 bug，是规范行为。
常见误判来源包括：
- 把视觉裁剪（
overflow: hidden）当成热区限制，其实热区和渲染是两套逻辑 - 在父容器上用了
transform，导致伪元素定位偏移，热区错位却不自知 - 用
border-radius+inset扩展后，误以为圆角部分可点，实际只有矩形区域生效
::before 模拟不规则热区的关键写法
核心思路：用多个伪元素拼出视觉上的不规则轮廓，每个都覆盖一块矩形热区，再通过 z-index: -1 和 pointer-events: none 避免遮挡，让真实内容仍可交互。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 主按钮必须设
position: relative，否则伪元素会向上找定位上下文，飘到屏幕左上角 - 每个伪元素都要有
content: ""，否则不渲染；显式写display: block或position: absolute - 用
top/right/bottom/left四边偏移代替inset，避免 IE11 和 Safari ≤14.1 兼容问题 - 所有伪元素统一设
pointer-events: none，真实按钮保持pointer-events: auto（默认值） - 若需斜边效果（如 Chrome Tab 按钮），用
transform: rotateX()+perspective，但注意这会破坏热区映射——必须额外用一个同尺寸的::before覆盖原始矩形热区
移动端真机测试最容易漏掉的三件事
写完 CSS 不代表能点中，尤其在 iOS Safari 上：
- 没加
touch-action: manipulation在真实按钮上，扩展出的热区仍会触发 300ms 延迟或被识别为滑动 - 父容器含
overflow: hidden或will-change: transform，把伪元素扩出去的部分硬生生裁掉 - 扩展尺寸按 px 写，但在 2x/3x 屏幕下不足 44×44pt（iOS 最小触控要求），比如只扩
8px，实际物理尺寸可能才 16px
最麻烦的不是怎么画形状，而是扩完之后忘了检查键盘焦点 outline 是否还对齐、:focus-visible 样式是否被伪元素遮挡、以及 VoiceOver 是否还能正确读出按钮语义——这些都不在热区计算里，但直接影响可访问性。
