clip-path仅裁剪视觉，不改变点击区域；需用svg或增大容器尺寸至44×44px并配合padding+clip-path实现合规交互。
用clip-path裁出形状，但点击区域仍是矩形
直接写clip-path: polygon(0% 0%, 100% 20%, 80% 100%, 20% 100%)能视觉上切出不规则按钮，但鼠标事件仍响应整个原始盒模型——比如一个宽高 200×100px 的 button，哪怕只显示左下角三角形，右上角空白区依然能点中。这不是 bug，是浏览器规范行为。
必须显式约束交互范围：
- 确保父容器没设
pointer-events: none，且该按钮自身没被z-index压在底层 - 若用
<div> 模拟按钮，必须加 <code>role="button" tabindex="0"，否则键盘用户无法聚焦 - 测试时打开 DevTools → Elements → 右键元素 → “Toggle element screenshot”，看裁剪后是否还有不可见的悬空热区
<map></map> 不适合不规则按钮，坐标难维护
<map></map> 是为静态图片热区设计的，不是 UI 组件方案。它要求你手动量原始图片像素坐标，一旦按钮尺寸随响应式变化（比如横幅图从 1920px 缩到 375px），所有 coords 都得重算。更麻烦的是：shape="poly" 的顶点顺序错一位、少一个数、或多一个空格，整个区域就静默失效——浏览器不报错，只让你反复点不动。
除非你有固定尺寸、零缩放、且坐标终身不变的图片，否则别把它当按钮用。
真正可控的替代：SVG <path></path> + pointer-events
把不规则图形画成 SVG <path></path>，再包裹一层 <a></a> 或带 onclick 的 <g></g>，是最稳妥的方案。SVG 坐标系天然适配缩放，且 pointer-events: visiblePainted（默认值）能确保只有描边/填充区域响应点击，空白部分完全忽略。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
示例片段：
<svg viewbox="0 0 200 100" width="100%" height="auto"><a href="/action">
<path d="M0,0 L200,20 L160,100 L40,100 Z" fill="#007bff"></path></a>
</svg>
注意两点：
-
viewBox必须设，否则缩放后路径变形或点击偏移 - 不要给
<path></path>单独加cursor: pointer，要加在<a></a>或外层容器上
移动端热区必须 ≥44×44px，clip-path 不改变这个底线
即使你用 clip-path 切出一个 20×20px 的星形，iOS 和 Android 仍要求可触控目标最小 44×44 CSS 像素。靠视觉“看起来够大”没用，系统级点击判定只认包围盒尺寸。
正确做法是：
- 先用
padding把按钮撑到至少 44×44px（如padding: 12px 24px） - 再用
clip-path在这个安全区域内裁出想要的形状 - 避免用
transform: scale()放大——它骗不过系统点击检测
最常被忽略的，是把 clip-path 当成“缩小点击区”的手段。它只裁视觉，不裁事件；想限制点击，只能靠尺寸控制或 SVG 路径本身。
