html中 如何做一个六边形

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()，它作用于裁剪后的最终形状

六边形看着简单，真正卡住人的往往是坐标系理解偏差和浏览器渲染细节差异。动手前先确认目标环境支持哪条路径，别在 IE 兼容方案里浪费时间，除非真有人还在用。