[分享]css前端六边形

CSS前端技术不断创新，现在，我们可以使用CSS轻松地制作出六边形，下面是一些HTML和CSS的代码示例：

<!-- HTML代码 -->
<div class="hexagon">
  <div class="hex-top"></div>
  <div class="hex-bottom"></div>
</div>

/* CSS代码 */
.hexagon {
  width: 160px;
  height: 92px;
  position: relative;
}

.hex-top, .hex-bottom {
  position: absolute;
  z-index: 1;
  width: 112px;
  height: 64px;
  background: #FFC107;
  transform: rotate(120deg);
}

.hex-top {
  top: -32px;
}

.hex-bottom {
  bottom: -32px;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 112px;
  height: 64px;
  background: #FFC107;
}

.hexagon:before {
  top: 0;
  left: -56px;
  transform: rotate(60deg);
}

.hexagon:after {
  bottom: 0;
  left: -56px;
  transform: rotate(-60deg);
} 

通过这些代码，我们可以轻松地制作六边形，并对其颜色、大小、位置进行自定义设置。

总的来说，CSS制作六边形不仅是一种视觉效果，也可以被用来代表多种业务场景，如按钮、图标等。