[分享]css六边形怎么加边框

CSS六边形是一种非常特殊的形状，它由多条边线组成，而且每个边都呈现六边形的形状。如果您想要在六边形上加上边框，那么您需要在CSS中加入一些代码：.hexagon { : relative; widt...

CSS六边形是一种非常特殊的形状，它由多条边线组成，而且每个边都呈现六边形的形状。如果您想要在六边形上加上边框，那么您需要在CSS中加入一些代码：

.hexagon {
  position: relative;
  width: 100px; /* 六边形宽度 */
  height: 57.74px; /* 六边形高度 */
  margin: 28.87px 0;
  background-color: #6C6;
  border-left:  solid 1px #000;
  border-right: solid 1px #666;
  border-top:   solid 1px #999;
  border-bottom:solid 1px #999;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: inherit;
  height: inherit;
  background: inherit;
  border-left: inherit;
  border-right: inherit;
  border-top: inherit;
  border-bottom:inherit;
}

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

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

以上代码中，我们给六边形的四个边线加入了边框，分别为左边框、右边框、上边框和下边框。加入边框后，您会发现六边形呈现出一种全新的视觉效果。

在 CSS 中实现六边形，通常采用伪元素的技术，即用 :before 和 :after 两种伪元素来实现。通过旋转伪元素，我们可以将它们固定在六边形的两个不同的角落上。

总的来说，如果您想为CSS六边形加边框，以上代码可以为您提供很好的参考。如果您有其它问题，欢迎在下面留言。