[分享]css六边形daima

CSS六边形是在网页设计中常用的一种元素。六边形形状不仅美观，而且能够吸引用户的注意力，就像蜂巢一样的六边形形状也经常被用来展示产品或图片。要实现六边形，我们可以使用CSS样式。下面就是一个六边形的代...

CSS六边形是在网页设计中常用的一种元素。六边形形状不仅美观，而且能够吸引用户的注意力，就像蜂巢一样的六边形形状也经常被用来展示产品或图片。要实现六边形，我们可以使用CSS样式。下面就是一个六边形的代码：

.hexagon {
  position: relative;
  width: 200px;
  height: 115.47px;
  background-color: #64C7CC;
  margin: 57.74px 0;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 57.74px solid #64C7CC;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 57.74px solid #64C7CC;
} 

这段代码中，我们首先定义了一个类 ".hexagon"，并将它的 position 设为 relative。接下来，我们设置了六边形的宽度和高度，以及背景颜色。margin 属性用来将六边形居中。

接着，我们定义了 ".hexagon:before" 和 ".hexagon:after" 这两个伪类，它们用来实现六边形的两个三角形部分。我们先将它们的 content 属性设为空，position 设为 absolute，width 设为 0。然后，我们通过设置 border-left 和 border-right 的宽度来定义三角形的形状。注意，这里的边框颜色设为了 transparent。

".hexagon:before" 三角形部分的位置在六边形的底部，并且 border-bottom 的宽度设置为了六边形高度的一半。".hexagon:after" 三角形部分的位置在六边形的顶部，border-top 的宽度也是六边形高度的一半。

使用以上代码，我们就能够轻松地在网页中实现六边形效果。