[分享]css六边形菜单

CSS六边形菜单是一种很特别的导航菜单形式，它可以让网页更加有趣、有活力。下面我们来一起看看如何用CSS来实现这种菜单。.hexagon { : relative; width: 100px; hei...

CSS六边形菜单是一种很特别的导航菜单形式，它可以让网页更加有趣、有活力。下面我们来一起看看如何用CSS来实现这种菜单。

.hexagon {
  position: relative;
  width: 100px;
  height: 55px;
  background-color: #4CAF50;
  margin: 30px;
  float: left;
  z-index: 2;
}

.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: 25px solid #4CAF50;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 25px solid #4CAF50;
}

.hexagon:hover {
  transform: scale(1.1);
} 

在上面的代码中，我们首先定义了一个类名为“hexagon”的元素，然后对该元素进行了样式设置。具体来说，我们设置了该元素的position为relative，宽度为100px，高度为55px，背景颜色为#4CAF50，外边距为30px，浮动为左侧，z-index为2。

接下来，我们使用了伪元素:before和:after来绘制了一个六边形。我们首先将它们的content设置为空，然后将它们的position设置为absolute，并分别设置了左右边框为50px的无色边框。

接着，我们对伪元素:before设置了bottom为100%和border-bottom为25px的绿色实色边框，而对伪元素:after设置了top为100%和border-top为25px的绿色实色边框。

最后，我们使用:hover伪类来设置当该元素被鼠标悬停时的效果，即放大1.1倍。

这样，我们就完成了CSS六边形菜单的制作。你可以用这种菜单来实现非常酷炫的效果，从而吸引用户的注意力，提升网页的互动性和趣味性。