clip-path 是实现不规则形状按钮最直接可控的方式，需用 polygon() 定义闭合多边形、确保点击热区与视觉一致、兼顾兼容性与可访问性。
clip-path 是目前在 HTML 中实现不规则形状按钮最直接、最可控的方式，不需要额外 DOM 元素或 SVG 外部依赖，但要注意浏览器兼容性和点击热区一致性。
用 clip-path: polygon() 定义任意轮廓
核心是把按钮容器（<button> 或 <div>）用 clip-path “裁”出想要的多边形。你提供的示例中那一长串百分比坐标，就是按顺时针顺序描述顶点位置：
- 坐标必须是相对宽高的百分比（如
8.8% 0%）或绝对长度（如20px 10px），混合使用会失效 - 至少需要 3 个点才能构成有效多边形；少于 3 点会被浏览器忽略或退化为矩形
- 所有点必须闭合（首尾不必重复，浏览器自动连线），否则渲染可能异常
- 如果按钮宽高动态变化（比如响应式），用百分比坐标更安全；固定尺寸可用像素，但失去弹性
确保点击区域与视觉形状完全一致
这是最容易被忽略的坑：即使 clip-path 裁出了五角星，原始元素的盒模型仍是个矩形，鼠标悬停和点击事件仍会响应整个包围盒 —— 除非你显式限制交互范围：
- 给按钮加
pointer-events: auto（默认值，通常不用写），但要避免父级设置了pointer-events: none - 不要依赖
overflow: hidden来“遮住”多余区域 —— 它不影响事件捕获 - 若用
<div>模拟按钮，务必加role="button"和tabindex="0"，否则键盘用户无法聚焦 - 测试时用 DevTools 的「Toggle element screenshot」功能，看实际裁剪后是否还有不可见的“死区”
替代方案对比：border-radius vs shape-outside vs SVG
这三者都不是为“按钮形状”设计的，强行套用容易翻车：
立即学习“前端免费学习笔记（深入）”；
-
border-radius: 50%只能做正圆或椭圆，且要求宽高相等才真圆；非正方形下是椭圆，不是多边形 -
shape-outside仅作用于浮动元素的**文字环绕路径**，对按钮自身形状和点击区域完全无效 - SVG
<path>做按钮虽精确，但需包裹<button>或用<foreignObject>，增加 DOM 复杂度，且焦点/可访问性需手动处理
真正需要复杂轮廓时，clip-path 仍是首选；简单圆角优先用 border-radius，它性能更好、兼容性更强（IE 都支持）。
移动端和 Safari 的兼容性补丁
clip-path 在 iOS Safari 15.4+ 和 Android Chrome 95+ 支持良好，但旧版 Safari（≤15.3）只认 -webkit-clip-path，且不支持百分比坐标：
- 必须同时写两行：
clip-path: polygon(...); -webkit-clip-path: polygon(...); - 旧 Safari 中，把百分比转成像素值（需 JS 动态计算或媒体查询分段写死）才能生效
- 如果目标用户含大量 iOS 14 设备，建议降级为
border-radius+ 视觉错觉（比如用伪元素叠加遮罩层） - 别忘了加
cursor: pointer—— 某些安卓 WebView 下，裁剪后光标仍显示为默认箭头
最后提醒一句：再酷的多边形，如果点不到、看不见焦点框、屏幕阅读器读不出，就不是合格的按钮。形状是手段，可访问性和可用性才是底线。
