[分享]css六边形怎么实现

在CSS中，六边形实现可以用常规的CSS属性来实现。首先，我们需要一个六边形的基本结构，如下所示： 其中，hexagon是六边形的容器，hexagoninner是六边形的内部容器，hexag...

在CSS中，六边形实现可以用常规的CSS属性来实现。首先，我们需要一个六边形的基本结构，如下所示：

 <div class="hexagon">
    <div class="hexagon-inner"></div>
    <div class="hexagon-before"></div>
    <div class="hexagon-after"></div>
  </div> 

其中，hexagon是六边形的容器，hexagon-inner是六边形的内部容器，hexagon-before和hexagon-after是六边形的两个包裹容器。我们需要设置这些容器的基本样式和属性来实现六边形的效果。

.hexagon {
  position: relative;
  width: 200px;
  height: 115.47px; /* 六边形高度是边长的1.732倍 */
  background-color: #BDBDBD;
}

.hexagon-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
}

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

.hexagon-before {
  top: -57.735%;
  border-bottom: 57.735% solid #BDBDBD;
}

.hexagon-after {
  bottom: -57.735%;
  border-top: 57.735% solid #BDBDBD;
} 

通过以上代码，我们设置了.hexagon的基本宽度和高度等属性，同时也设置了.hexagon-inner，以及.hexagon-before和.hexagon-after的样式和属性。其中，我们需要设置两个包裹容器的位置坐标和边框颜色等属性来实现六边形的样式。

最后，我们让.hexagon的内部容器和.hexagon-before、.hexagon-after容器都继承.hexagon的样式。这样，我们就可以实现一个简单的六边形元素了。