在网页布局中，六边形常被用于图标容器、网格布局等场景，用css绘制正六边形不需要依赖图片，能减少资源请求，也方便后续调整样式。下面介绍两种常用的实现方法。
方法一：使用clip_path属性裁剪
clip_path属性可以直接裁剪元素的可见区域，通过定义正六边形的路径坐标，就能快速得到正六边形。这种方法的代码简洁，不需要复杂的属性组合。
首先定义基础的正六边形样式，设置宽高和背景色，然后通过clip_path的polygon函数定义六个顶点的坐标。正六边形的顶点坐标可以通过三角函数计算，也可以直接使用比例值适配不同尺寸。
/* 正六边形基础样式 */
.hexagon-clip {
width: 100px;
height: 115.47px; /* 正六边形高度计算公式：宽 * √3 / 2，100*1.732/2≈86.6？不对，应该是如果宽是两倍的边心距？不对，正确的正六边形如果外接圆半径是r，那么宽是2r，高是√3 r，所以如果宽设为100px，高就是100*1.732≈173.2？不对，我调整下，刚才的高度写错了，重新来 */
/* 正确的计算：假设正六边形的边长为50px，那么水平方向的宽度是2*边长=100px，垂直方向的高度是边长*√3≈86.6px，所以宽100px，高86.6px，然后clip_path的坐标按比例来 */
width: 100px;
height: 86.6px;
background-color: #4CAF50;
/* polygon的六个顶点坐标，按顺序为左上、上、右上、右下、下、左下 */
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}如果需要调整正六边形的大小，只需要修改width和height的值，同时clip_path的百分比坐标不需要改动，会自动适配尺寸。这种方法的优点是代码量少，调整方便，缺点是不支持IE浏览器，如果需要兼容旧版浏览器就不适用。
方法二：使用border配合transform旋转
这种方法通过三个重叠的div，分别用border画出梯形的部分，再旋转组合成正六边形，兼容性更好，支持大部分旧版浏览器。
首先需要一个外层容器，内部放三个子元素，分别旋转0度、60度、120度，每个子元素通过border生成梯形，三个梯形拼接起来就是完整的正六边形。
<div class="hexagon-border"> <div class="hexagon-inner"></div> <div class="hexagon-inner rotate-60"></div> <div class="hexagon-inner rotate-120"></div> </div>
对应的css样式如下，通过设置border的宽度和颜色，让每个子元素显示梯形的部分，再旋转到对应角度拼接：
/* 外层容器，控制正六边形的整体尺寸 */
.hexagon-border {
width: 100px;
height: 100px;
position: relative;
}
/* 公共的子元素样式，每个子元素是一个梯形 */
.hexagon-inner {
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 43.3px solid #2196F3; /* 梯形高度，边长*√3/2≈43.3 */
top: 0;
left: 0;
}
/* 旋转60度的子元素 */
.rotate-60 {
transform: rotate(60deg);
transform-origin: 50% 100%; /* 旋转中心设为底部中点 */
}
/* 旋转120度的子元素 */
.rotate-120 {
transform: rotate(120deg);
transform-origin: 50% 100%;
}这种方法的优点是兼容性好，支持IE10及以上版本，缺点是需要多个元素嵌套，代码相对复杂，调整尺寸时需要同步修改border的宽度和旋转中心，维护成本稍高。
两种方法对比
可以通过下面的表格对比两种方法的差异，根据实际需求选择：
| 对比项 | clip_path方法 | border旋转方法 |
|---|---|---|
| 代码复杂度 | 低，单元素实现 | 高，需要三个元素嵌套 |
| 浏览器兼容性 | 不支持IE，现代浏览器全支持 | 支持IE10+，兼容性更好 |
| 尺寸调整 | 只需改宽高，自动适配 | 需要同步修改border宽度和旋转参数 |
| 适用场景 | 现代浏览器项目，快速开发 | 需要兼容旧版浏览器的项目 |
实际开发中，如果不需要兼容IE浏览器，优先选择clip_path方法，代码更简洁；如果需要兼容旧版环境，再选择border旋转的方法。两种方法都能实现正六边形的绘制，开发者可以根据项目需求灵活选择。