[分享]css六边形框

在网页设计中，六边形常被用于图标、标签或是特色的设计。在本篇文章中，我们将介绍如何使用CSS代码实现六边形框的设计。首先，我们需要设置一个div容器，并设置其背景颜色以及六边形的高度和宽度，代码如下：...

在网页设计中，六边形常被用于图标、标签或是特色的设计。在本篇文章中，我们将介绍如何使用CSS代码实现六边形框的设计。

首先，我们需要设置一个div容器，并设置其背景颜色以及六边形的高度和宽度，代码如下：

<div class="hexagon"></div>

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

接下来，我们需要使用伪元素来实现六边形框的效果。我们需要设置一个::before和一个::after元素，并将它们的border颜色设置为透明，代码如下：

.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 #6C5B7B;
}

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

上述代码中使用了两个伪元素，它们的位置是相对于六边形容器的，其中before元素用于绘制下半部分的三角形，而after元素则用于绘制上半部分的三角形。我们将其宽度设为0，是因为我们不需要生成伪元素的大小，只需要利用border来绘制一个蚕豆形的形状。

最后，我们只需要将before和after的border颜色设置为与容器背景颜色一致，这样就可以生成六边形框的效果了。

完整的CSS代码如下：

.hexagon {
  width: 200px;
  height: 115.47px;
  background-color: #6C5B7B;
  position: relative;
  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 #6C5B7B;
}

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

在此，我们就成功地实现了一个简单的六边形框设计。希望本文对您的网页设计有所帮助。