css如何制作六边形

2026-04-01 01:59:20CSS

使用CSS制作六边形

方法一：使用CSS和伪元素

通过CSS的clip-path属性结合伪元素可以轻松创建六边形。这种方法简单且兼容性较好。

<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>');
}

方法四：使用CSS transform

通过旋转和位移矩形元素创建六边形，适合需要动态调整的场景。

css如何制作六边形

<div class="hexagon-transform">
  <div class="face1"></div>
  <div class="face2"></div>
  <div class="face3"></div>
</div>

.hexagon-transform {
  position: relative;
  width: 100px;
  height: 115px;
}

.hexagon-transform div {
  position: absolute;
  width: 100px;
  height: 20px;
  background-color: #64C7CC;
}

.face1 {
  transform: rotate(60deg);
}

.face2 {
  transform: rotate(120deg);
}

.face3 {
  transform: rotate(180deg);
}