css3制作六边形

使用CSS3制作六边形的方法

方法一：使用transform旋转矩形

通过旋转两个矩形叠加形成六边形。这种方法利用了CSS3的transform属性。

<div class="hexagon"></div>

.hexagon {
  width: 100px;
  height: 55px;
  background-color: #64C7CC;
  position: relative;
}
.hexagon:before, .hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
.hexagon:before {
  bottom: 100%;
  border-bottom: 28px solid #64C7CC;
}
.hexagon:after {
  top: 100%;
  border-top: 28px solid #64C7CC;
}

方法二：使用clip-path属性

clip-path属性可以直接裁剪出六边形形状，是最简洁的方法。

<div class="hexagon-clip"></div>

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

方法三：使用SVG背景

通过SVG创建六边形图案，作为背景图像使用。

<div class="hexagon-svg"></div>

.hexagon-svg {
  width: 100px;
  height: 115px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 115"><polygon points="50 0, 100 25, 100 75, 50 100, 0 75, 0 25" fill="%2364C7CC"/></svg>');
}

方法四：使用伪元素和旋转

通过伪元素创建三角形并旋转，组合成六边形。

<div class="hexagon-rotate"></div>

.hexagon-rotate {
  width: 100px;
  height: 100px;
  background-color: #64C7CC;
  position: relative;
  transform: rotate(30deg);
}
.hexagon-rotate:before {
  content: "";
  position: absolute;
  top: -50px;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: #64C7CC;
  transform: rotate(60deg);
}

注意事项

• 使用clip-path方法时需注意浏览器兼容性，某些旧版本浏览器可能需要添加前缀
• 旋转方法计算尺寸时需要考虑三角函数关系
• SVG方法具有最好的兼容性，但修改颜色需要通过修改SVG代码实现
• 六边形的宽高比例应为1:√3（约1:1.732）才能得到正六边形

这些方法各有优缺点，可根据项目需求选择最适合的实现方式。clip-path方法代码最简洁，transform方法兼容性较好，SVG方法最灵活。