六边形 html 导航菜单,CSS实现多彩的六边形蜂窝菜单

好的，我可以为您解答。要实现六边形导航菜单，可以使用CSS的transform和rotate属性来实现。以下是一个简单的示例代码：

HTML:

<div class="hexagon-menu">
  <div class="hexagon-menu-item hexagon-menu-item-1"></div>
  <div class="hexagon-menu-item hexagon-menu-item-2"></div>
  <div class="hexagon-menu-item hexagon-menu-item-3"></div>
  <div class="hexagon-menu-item hexagon-menu-item-4"></div>
  <div class="hexagon-menu-item hexagon-menu-item-5"></div>
  <div class="hexagon-menu-item hexagon-menu-item-6"></div>
</div>

CSS:

.hexagon-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  height: 100%;
}

.hexagon-menu-item {
  width: 100px;
  height: 115px;
  background-color: #333;
  position: relative;
  margin: 10px;
  z-index: 1;
  overflow: hidden;
  transform: rotate(30deg);
}

.hexagon-menu-item:before,
.hexagon-menu-item:after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  background-color: inherit;
  z-index: -1;
  transform: rotate(-60deg);
}

.hexagon-menu-item:before {
  transform-origin: left top;
  top: -57.5px;
}

.hexagon-menu-item:after {
  transform-origin: left bottom;
  bottom: -57.5px;
}

.hexagon-menu-item-1:before {
  background-color: #f00;
}

.hexagon-menu-item-1:after {
  background-color: #0f0;
}

.hexagon-menu-item-2:before {
  background-color: #ff0;
}

.hexagon-menu-item-2:after {
  background-color: #00f;
}

.hexagon-menu-item-3:before {
  background-color: #0ff;
}

.hexagon-menu-item-3:after {
  background-color: #f0f;
}

.hexagon-menu-item-4:before {
  background-color: #f0f;
}

.hexagon-menu-item-4:after {
  background-color: #0ff;
}

.hexagon-menu-item-5:before {
  background-color: #00f;
}

.hexagon-menu-item-5:after {
  background-color: #ff0;
}

.hexagon-menu-item-6:before {
  background-color: #0f0;
}

.hexagon-menu-item-6:after {
  background-color: #f00;
}

这段代码将生成一个六边形的导航菜单，每个菜单项都是一个带有不同颜色的六边形。您可以通过更改每个菜单项的类名，来更改每个六边形的颜色和样式。