css3制作六边形

使用CSS3制作六边形

六边形可以通过CSS3的clip-path属性或transform属性结合伪元素实现。以下是两种常见方法：

方法一：使用clip-path

clip-path属性直接裁剪元素为六边形形状，代码简洁且易于调整。

.hexagon {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

参数说明：

• polygon()定义多边形的顶点坐标，按顺时针或逆时针顺序排列。
• 六边形的六个顶点坐标比例分别为：顶部中点(50% 0%)、右上角(100% 25%)、右下角(100% 75%)、底部中点(50% 100%)、左下角(0% 75%)、左上角(0% 25%)。

方法二：使用伪元素和transform

通过旋转两个矩形伪元素拼合成六边形，兼容性较好但代码稍复杂。

.hexagon {
  width: 100px;
  height: 55px;
  background-color: #3498db;
  position: relative;
}

.hexagon:before, .hexagon:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: inherit;
}

.hexagon:before {
  transform: rotate(60deg);
}

.hexagon:after {
  transform: rotate(-60deg);
}

注意事项：

• 容器高度需为宽度的√3/2倍（约0.866），如宽度100px时高度约57.7px。
• 伪元素通过旋转60°和-60°模拟六边形的上下两部分。

扩展：六边形边框

若需添加边框，可使用clip-path的url()引用SVG路径或嵌套多层元素。

.hexagon-border {
  width: 104px;
  height: 104px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background-color: #e74c3c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hexagon-border .inner {
  width: 100px;
  height: 100px;
  clip-path: inherit;
  background-color: #3498db;
}

关键点：

• 外层元素稍大，通过背景色模拟边框效果。
• 内层元素尺寸略小，填充主色。

浏览器兼容性

• clip-path在现代浏览器中支持良好，但需注意IE不兼容。
• 伪元素方法兼容性更广，但无法实现复杂边框效果。