最可靠方法是用 clip-path: polygon() 配合 aspect-ratio 或明确宽高，否则百分比坐标失效导致变形或消失；需用 -webkit-clip-path 兜底 safari，降级推荐 border-radius 或 svg。
直接用 clip-path: polygon() 裁剪图片最可靠，但必须配 aspect-ratio 或明确宽高，否则六边形会拉伸、偏移甚至消失。
为什么图片裁成六边形后变形或只显示一角
根本原因不是坐标写错，而是裁剪坐标系失去参照：图片元素没设宽高或 aspect-ratio，导致百分比坐标（如 50% 0%）无意义。浏览器按默认 content box 渲染，而图片本身宽高由内容决定，clip-path 就“找不到裁哪儿”。
- 必须给图片容器（或图片自身）加
width和height，或更推荐的aspect-ratio: 1/1.1547（正六边形高宽比） - 如果用
<img>标签直接裁剪，需同时设width: 100%、height: 100%和object-fit: cover，否则图片缩放不匹配裁剪区域 - 别在父容器上设
overflow: hidden——它会截断clip-path的渲染区域，尤其 Safari 下静默失效
clip-path 六边形坐标怎么写才不翻车
网上抄来的 “标准六边形顶点” 多数以中心为原点，但 clip-path: polygon() 坐标系原点永远是元素左上角。直接粘贴会导致图形整体偏出可视区。
- 尖角朝上的正六边形，经验证可用的百分比坐标是：
polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) - 所有值必须统一单位，禁用混合写法（如
50% 0px），Safari 会忽略整条声明 - 小数精度控制在两位内（如
33.33%），移动端 Safari 对33.333%渲染不稳定 - 顶点顺序必须顺时针；若反向（比如从
0% 25%开始绕），Safari 可能完全不显示
Safari 和旧版浏览器兼容性怎么兜底
Safari 15.4 之前不支持 clip-path: polygon()（除非加前缀），且 IE 完全不支持。不能靠 JS 检测再插入样式，得用 CSS 原生降级机制。
- 必须写双声明：
clip-path: polygon(...); -webkit-clip-path: polygon(...) - 用
@supports (clip-path: polygon())包裹现代写法，里面再写-webkit-clip-path - 降级方案别用伪元素拼六边形——维护成本高、hover 区域仍是矩形、旋转后白边难控；更实际的是 fallback 为圆角矩形（
border-radius: 20px）或圆形（clip-path: circle(50% at 50% 50%)） - 若必须支持 IE11，优先改用内联 SVG：
<svg viewbox="0 0 100 100"><polygon points="50,0 100,25 100,75 50,100 0,75 0,25"></polygon></svg>，并确保viewBox和points单位一致
加边框和 hover 动画要注意什么
border 会被 clip-path 裁掉，hover 也只响应六边形内部区域——这是优点，但容易被忽略。
- 要边框就别用
border，改用outline（注意outline-offset控制距离），或套一层带border的父容器 +overflow: hidden -
transition: clip-path 0.3s可平滑缩放六边形，但仅polygon()和inset()支持插值动画；circle()或path()在部分浏览器中会跳变 - hover 效果必须直接写在裁剪元素上，不要写在父容器；SVG 方案则必须写在
<polygon></polygon>上，而非<svg></svg> - 动画过程中若出现锯齿，加
will-change: clip-path或确保父层有transform: translateZ(0)触发硬件加速
真正卡住人的从来不是坐标怎么算，而是忘了 aspect-ratio 和 -webkit- 前缀这两件事。一漏，整个六边形就“失踪”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
