css 六边形加边框

CSS 六边形加边框

六边形是一个独特的形状，在网页设计中也有很多应用。在这篇文章中，我们将学习如何使用 CSS 创建一个六边形并添加边框。

首先，我们需要创建一个六边形的基本结构。我们可以使用一个 div 元素，并使用伪元素 :before 和 :after 创建三角形来组成六边形。

<div class="hexagon">
  <!-- 使用伪元素创建一个三角形 -->
  <span class="triangle-top"></span>
  <!-- 使用伪元素创建另一个三角形 -->
  <span  class="triangle-bottom"></span>
</div>

接下来，我们为我们的六边形添加样式。我们将使用 CSS 的 transform 和 rotate 属性来处理三角形的旋转和定位。我们还将使用 Box-sizing 属性来确保我们六边形的尺寸正确。

.hexagon {
  position: relative;
  width: 100px;
  height: 57.74px;
  margin-bottom: 15px;
  background-color: #ffcc00;
  text-align: center;
  line-height: 57.74px;
  color: #fff;
  Box-sizing: border-Box;
}

.triangle-top,.triangle-bottom {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

.triangle-top {
  top: -28.87px;
  border-bottom: 28.87px solid #ffcc00;
}

.triangle-bottom {
  bottom: -28.87px;
  border-top: 28.87px solid #ffcc00;
}

.hexagon:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border: 5px solid #000;
  z-index: -1;
}

.hexagon:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border: 5px solid #000;
  z-index: -1;
  transform: rotate(60deg);
}

现在我们的六边形已经完成了，并且使用了加边框的效果。我们可以根据需要更改颜色和尺寸，以满足我们的设计需求。

在实际应用中，我们可以将六边形用于各种设计要素，例如背景、按钮等，用来增强视觉效果。