css3制作六边体

使用CSS3制作六边体

方法一：使用CSS3的transform属性

通过CSS3的transform属性可以实现六边体的效果。以下是一个基本的六边体实现代码：

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

.hexagon {
  width: 100px;
  height: 55px;
  background-color: #6C6;
  position: relative;
  margin: 50px auto;
}

.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 #6C6;
}

.hexagon:after {
  top: 100%;
  border-top: 28px solid #6C6;
}

方法二：使用clip-path属性

clip-path属性可以更直接地裁剪出六边形形状：

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

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

方法三：使用SVG与CSS结合

通过SVG定义六边形路径，再通过CSS控制样式：

<svg class="hexagon-svg" viewBox="0 0 100 100" width="100" height="100">
  <polygon points="50,0 100,25 100,75 50,100 0,75 0,25" />
</svg>

.hexagon-svg polygon {
  fill: #6C6;
}

方法四：使用CSS3的3D变换

如果需要立体的六边体效果，可以通过3D变换实现：

<div class="hexagon-3d">
  <div class="face front"></div>
  <div class="face back"></div>
  <div class="face left"></div>
  <div class="face right"></div>
  <div class="face top"></div>
  <div class="face bottom"></div>
</div>

.hexagon-3d {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(45deg);
  margin: 100px auto;
}

.hexagon-3d .face {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: rgba(102, 204, 102, 0.7);
  border: 1px solid #6C6;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.front { transform: translateZ(50px); }
.back { transform: translateZ(-50px); }
.left { transform: rotateY(-90deg) translateZ(50px); }
.right { transform: rotateY(90deg) translateZ(50px); }
.top { transform: rotateX(90deg) translateZ(50px); }
.bottom { transform: rotateX(-90deg) translateZ(50px); }

注意事项

• clip-path属性在现代浏览器中支持良好，但在旧版浏览器中可能需要前缀或替代方案。
• 3D变换效果需要考虑浏览器兼容性和性能问题。
• 六边形的宽高比例通常为1:√3（约1:1.732）以获得正六边形。