css如何制作六边形

2026-02-12 17:57:56CSS

使用CSS制作六边形

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

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

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

使用伪元素创建六边形

另一种方法是使用伪元素来创建更复杂的六边形效果：

css如何制作六边形

.hexagon {
  width: 100px;
  height: 55px;
  background-color: #6a6;
  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 #6a6;
}

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

响应式六边形

为了使六边形在不同屏幕尺寸下保持比例，可以使用百分比单位：

css如何制作六边形

.hexagon-responsive {
  width: 20%;
  height: 11.5%;
  background-color: #6a6;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

旋转六边形

通过CSS transform属性可以旋转六边形：

.hexagon-rotated {
  width: 100px;
  height: 115px;
  background-color: #6a6;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transform: rotate(30deg);
}

六边形边框

为六边形添加边框效果：

.hexagon-border {
  width: 100px;
  height: 115px;
  background-color: #6a6;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position: relative;
}

.hexagon-border:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background-color: #fff;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

这些方法提供了创建六边形的多种选择，可以根据具体需求选择最适合的实现方式。clip-path方法最为简洁，而伪元素方法则提供了更多样化的样式控制可能性。