CSS 使用CSS3创建六边形形状

在本文中，我们将介绍如何使用CSS3创建六边形形状。CSS3提供了一些强大的特性和选择器，使我们能够以简单和灵活的方式来实现各种形状的设计。六边形是一个常见的图形，它在不同的情况下可以用于展示图标、按钮或其他元素。

阅读更多：CSS 教程

创建六边形形状的基本原理

CSS3通过伪元素 ::before 和 ::after 来实现六边形形状。我们可以利用这两个伪元素来创建一个有边框的正六边形，然后使用 CSS3 的 transform 属性来旋转它。接下来，我们将使用一些示例代码来演示如何实现这个效果。

.hexagon {
  position: relative;
  width: 100px;
  height: 57.74px;
  background-color: #ff0000;
  transform: rotate(120deg);
}

.hexagon::before, .hexagon::after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

.hexagon::before {
  bottom: 100%;
  border-bottom: 28.87px solid #ff0000;
}

.hexagon::after {
  top: 100%;
  width: 0;
  border-top: 28.87px solid #ff0000;
}

在上面的代码中，我们首先创建了一个具有指定宽度和高度的矩形，然后通过旋转它来得到六边形形状。通过使用伪元素 ::before 和 ::after，我们创建了两个分别位于上方和下方的三角形。由于三角形的底边是六边形的边，因此我们使用 border-left 和 border-right 属性来设置其形状。为了使六边形具有完整的边框，我们通过设置 border-bottom 和 border-top 属性来创建上方和下方的边框。

自定义六边形的样式

我们可以根据需要自定义六边形的样式。例如，我们可以更改背景颜色、边框颜色和宽度，以及形状的尺寸等。下面是一个示例代码，展示了如何自定义六边形的样式。

.hexagon {
  position: relative;
  width: 150px;
  height: 86.60px;
  background-color: #00ff00;
  transform: rotate(120deg);
  border: 2px solid #000000;
}

.hexagon::before, .hexagon::after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
}

.hexagon::before {
  bottom: 100%;
  border-bottom: 43.30px solid #00ff00;
  border-top: 2px solid #000000;
}

.hexagon::after {
  top: 100%;
  bottom: auto;
  border-top: 43.30px solid #00ff00;
  border-bottom: 2px solid #000000;
}

在上面的代码中，我们修改了六边形的背景颜色为绿色，并给边框添加了黑色的2像素边框。同时，我们改变了六边形的尺寸，使其更大。

使用六边形形状的实际示例

六边形形状可以用于各种实际的设计示例中。下面是一些常见的应用场景。

图标

六边形形状可以用于创建独特的图标，以区分不同的功能或部分。例如，我们可以使用不同颜色的六边形图标来表示不同的导航选项。

<ul class="navigation">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">关于</a></li>
</ul>

.navigation li {
  display: inline-block;
  margin: 0 10px;
}

.navigation li a {
  display: block;
  position: relative;
  width: 100px;
  height: 57.74px;
  background-color: #ff0000;
  transform: rotate(120deg);
  color: #ffffff;
  text-align: center;
  line-height: 57.74px;
  text-decoration: none;
}

.navigation li a::before, .navigation li a::after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

.navigation li a::before {
  bottom: 100%;
  border-bottom: 28.87px solid #ff0000;
}

.navigation li a::after {
  top: 100%;
  width: 0;
  border-top: 28.87px solid #ff0000;
}

按钮

六边形形状还可以用于创建独特的按钮样式。例如，我们可以将六边形按钮应用于提交表单的按钮，在用户界面中产生视觉上的吸引力。

<button class="btn">提交表单</button>

.btn {
  position: relative;
  width: 150px;
  height: 86.60px;
  background-color: #00ff00;
  transform: rotate(120deg);
  border: 2px solid #000000;
  color: #ffffff;
  text-align: center;
  line-height: 86.60px;
  text-decoration: none;
}

.btn::before, .btn::after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
}

.btn::before {
  bottom: 100%;
  border-bottom: 43.30px solid #00ff00;
  border-top: 2px solid #000000;
}

.btn::after {
  top: 100%;
  bottom: auto;
  border-top: 43.30px solid #00ff00;
  border-bottom: 2px solid #000000;
}

这里我们使用了相同的样式代码，只是将选择器 .hexagon 替换为选择器 .btn，并添加了按钮的文本内容。