css制作六边形

使用CSS创建六边形

通过CSS的clip-path属性可以轻松实现六边形形状。以下是一个基础实现方法：

.hexagon {
  width: 100px;
  height: 55px;
  background-color: #64C7CC;
  position: relative;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

六边形比例调整

六边形的宽高比例需符合数学关系。若宽度为2a，高度应为a * √3。例如：

• 宽度200px对应高度约173.2px（200 * 0.866）

.hexagon-proportional {
  width: 200px;
  height: 173.2px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

使用伪元素实现边框效果

通过伪元素可添加六边形边框，避免clip-path直接裁剪边框的问题：

.hexagon-border {
  width: 100px;
  height: 55px;
  position: relative;
  background-color: transparent;
}

.hexagon-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #64C7CC;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  border: 2px solid #000;
}

响应式六边形

结合百分比单位实现自适应：

.hexagon-responsive {
  width: 20%;
  height: calc(20% * 0.866);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

旋转六边形

通过transform旋转可改变六边形方向：

.hexagon-rotated {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

兼容性提示

clip-path在现代浏览器支持良好，但需注意：

• 添加-webkit-clip-path前缀确保WebKit内核兼容
• 旧版IE需使用SVG或替代方案