css clip-path 是现代浏览器中实现六边形最轻量可控的方式，需用百分比坐标（如 polygon(50% 0%,100% 25%,…）并确保元素有明确宽高或 aspect-ratio；svg 更适合交互场景，需配 viewbox；ie11 需伪元素+transform 模拟；图片六边形裁剪须先 clip-path 容器再设背景。
用 CSS clip-path 做六边形最直接
现代浏览器里，clip-path 是生成六边形最轻量、最可控的方式。它不依赖额外 DOM 元素或 SVG 引用，纯 CSS 就能定义形状边界。
常见错误是直接抄网上“正六边形坐标”却没调整坐标系原点——clip-path: polygon(...) 的坐标默认以元素左上角为 (0 0)，而标准六边形顶点公式通常假设中心在 (0 0)。结果就是图形偏出容器、只显示一角。
- 用
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)，所有坐标基于元素宽高百分比，天然居中适配 - 确保目标元素有明确宽高（比如
width和height都设为固定值或等比值），否则百分比坐标会失效 - 需要响应式时，优先用
aspect-ratio: 1/1配合clip-path，避免宽高变化导致变形
SVG <polygon></polygon> 更适合复杂交互场景
当六边形要响应点击区域、hover 动画、或和其它 SVG 元素对齐时，内联 SVG 的 <polygon></polygon> 比 clip-path 更可靠——它的坐标系独立、事件捕获准确、缩放无锯齿。
容易踩的坑是忘记设置 viewBox 或硬编码像素值：比如写 <polygon points="0,50 25,0 75,0 100,50 75,100 25,100"></polygon> 却没配 viewBox="0 0 100 100"，结果在不同尺寸容器里拉伸变形。
立即学习“前端免费学习笔记（深入）”；
- 固定套路：
<svg viewbox="0 0 100 100" width="200" height="200"><polygon points="50,0 100,25 100,75 50,100 0,75 0,25"></polygon></svg> - 想让六边形随父容器缩放？去掉
width/height，只留viewBox，然后用 CSS 控制 SVG 宽高（如width: 100%; aspect-ratio: 1/1） - 需要 hover 效果？直接给
<polygon></polygon>加:hover样式，别套在<svg></svg>上——后者可能响应不到内部点击
IE 不支持 clip-path？用伪元素 + transform 模拟
如果必须兼容 IE11，clip-path 和 SVG <polygon></polygon> 都不可用，只能退到 CSS 伪元素 + transform: rotate() 拼合六边形。原理是用三个重叠的矩形，各自旋转 0deg / 60deg / 120deg，再裁掉多余部分。
性能差、维护难是最大问题：每个“边”都要单独写 ::before 或 ::after，且旋转后 overflow: hidden 很难精准控制裁剪边缘，稍一调错就漏白边。
- 只在真正无法升级浏览器的老旧系统里用，别为兼容性牺牲现代项目的可维护性
- 必须用时，把六边形尺寸写死（比如
200px），所有transform和top/left值都按该尺寸计算，避免动态宽高引发错位 - 测试重点不是“看起来像”，而是点击热区是否完整覆盖六边形区域——IE 下
pointer-events在旋转元素上常失效
背景图六边形裁剪要注意 background-clip 无效
想让一张图片显示成六边形？别用 background-clip: text 或瞎试 border-image——这些和形状裁剪无关。唯一靠谱的是先用 clip-path 裁容器，再把图设为背景。
典型翻车现场：给 div 加了 clip-path，但背景图还是矩形铺满，六边形区域内出现重复平铺或拉伸失真。
- 确保
background-size: cover或contain，并设background-position: center，否则裁剪后内容偏移 - 避免用
background-attachment: fixed，它和clip-path在某些 Chrome 版本下有渲染冲突，滚动时出现闪烁 - 如果六边形要带阴影，别对元素本身加
box-shadow（会被裁掉），改用filter: drop-shadow()，它作用于裁剪后的最终形状
