[分享]css六边形怎么画

CSS六边形是一种常见的页面布局元素， 能够让界面更加美观有趣。下面是一些关于如何用CSS画出六边形的方法。

.hexagon {
  position:relative;
  width: 100px; 
  height: 55px; 
  background: #6C6;
  margin: 27px 0;
} 
.hexagon:before,
.hexagon:after {
  content:"";
  position:absolute;
  z-index: 1;
  background:#6C6;
  width: 71px;
  height: 71px;
  transform: rotate(45deg); 
  left: 14px; 
}
.hexagon:before {
  top: -35px;
}
.hexagon:after {
  bottom: -35px;
} 

以上代码可以画出一个基本的六边形，但是还有更多的样式可以添加，例如调整六边形的边框、填充颜色， 为六边形添加阴影等。以下是一些其他常见的样式选项:

.hexagon {
  position:relative;
  width: 120px; 
  height: 69.3px; 
  margin: 34.7px 0;
  background-color: #6C6;
  transform: rotate(120deg);
  display: inline-block;
  margin-right: 30px;
}

.hexagon::before,
.hexagon::after {
  position:absolute;
  content:"";
  background-color: inherit;
  width: 120px;
  height: 69.3px;
  transform-origin: 0 0;
}

.hexagon::before {
  transform: rotate(60deg);
}

.hexagon::after {
  transform: rotate(-60deg);
}

.hexagon.top,
.hexagon.bottom {
   margin: 0 30px;
}

.hexagon.top::before {
  bottom: -69.3px;
}

.hexagon.top::after {
  top: -69.3px;
}

.hexagon.bottom::before {
  top: -69.3px;
}

.hexagon.bottom::after {
  bottom: -69.3px;
} 

请注意, 不同的编码方法会产生不同的六边形形状。要画出一个好的六边形， 则需要考虑使用不同的编码方法来创建不同的样式和形状。希望您能够运用本文提供的方法，画出独特的CSS六边形。