css3制作六边体

使用CSS3制作六边体

通过CSS3的clip-path属性和transform属性可以创建六边形效果。以下是实现六边体的两种常见方法：

方法一：使用clip-path

通过clip-path直接裁剪出六边形形状，代码简洁且易于调整尺寸和比例。

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

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

• 关键参数：clip-path: polygon()中6个坐标点分别对应六边形的6个顶点，按顺时针或逆时针顺序排列。
• 比例调整：修改width和height可改变六边形大小，保持比例接近1:1.1可避免变形。

方法二：伪元素叠加

通过旋转两个矩形并叠加形成六边形，兼容性更好（适用于不支持clip-path的老版本浏览器）。

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

.hexagon-legacy {
  width: 100px;
  height: 55px;
  background-color: #00b894;
  position: relative;
  margin: 27.5px 0;
}
.hexagon-legacy:before,
.hexagon-legacy:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: inherit;
}
.hexagon-legacy:before {
  transform: rotate(60deg);
}
.hexagon-legacy:after {
  transform: rotate(-60deg);
}

• 原理：主矩形和两个旋转60度的伪元素叠加形成六边形。
• 尺寸关系：高度值为宽度的一半（如width: 100px则height: 50px）。

添加3D效果

结合transform-style和rotate属性可实现3D六棱柱效果：

.hexagon-3d {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, #fd79a8, #a29bfe);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transform-style: preserve-3d;
  transform: rotateX(20deg) rotateY(30deg);
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

• 深度增强：通过box-shadow和渐变背景色强化立体感。
• 旋转控制：调整rotateX和rotateY的值改变视角。