六边形网格的 CSS 魔法：打造夺人眼球的迷人设计

前端

2023-10-07 01:48:44

六边形网格的迷人魅力

在网页设计的领域中，六边形以其独特的美学和多功能性而备受青睐。它们能够打造出引人注目的背景图案，为网站增添一抹时尚气息。六边形网格的无限可能性使其成为从大胆前卫到精致优雅等各种设计风格的理想选择。

用 CSS 挥洒创意

虽然创建六边形网格可能乍一看令人生畏，但借助 CSS 的魔力，这一切变得轻而易举。通过利用边框和伪元素，我们可以巧妙地绘制出六边形的形状，并将其排列成赏心悦目的网格。

绘制六边形的基本原理

六边形由上下两个三角形和中间一个矩形组成。使用 CSS 的 border 属性，我们可以创建这些基本形状，并利用伪元素 ::before 和 ::after 将它们组合在一起，形成完整的六边形。

排列六边形形成网格

一旦我们掌握了绘制单个六边形，下一步就是将其排列成网格。通过设置适当的宽度和高度，我们可以控制六边形的尺寸，而 margin 属性则可以调节它们之间的间距。

实现六边形网格的详细步骤

步骤 1：创建基础容器

使用一个带有 position: relative; 属性的 div 容器作为六边形网格的父元素。

步骤 2：绘制六边形

在容器内创建一个子 div，并应用以下 CSS 样式：

width: 100px;
height: 87px;
border: 1px solid #000;
border-bottom: none;
position: absolute;

步骤 3：创建伪元素三角形

为子 div 添加伪元素 ::before 和 ::after，并应用以下 CSS 样式：

::before {
  content: "";
  position: absolute;
  top: -43.5px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 43.5px solid #000;
}

::after {
  content: "";
  position: absolute;
  bottom: -43.5px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 43.5px solid #000;
}

步骤 4：排列六边形

使用 top 和 left 属性将六边形定位在网格中。通过调整 margin 属性，可以控制六边形之间的间距。

示例代码

<div class="grid-container">
  <div class="hexagon"></div>
  <!-- 其他六边形... -->
</div>

.grid-container {
  position: relative;
  width: 600px;
  height: 400px;
}

.hexagon {
  width: 100px;
  height: 87px;
  border: 1px solid #000;
  border-bottom: none;
  position: absolute;
}

.hexagon::before {
  content: "";
  position: absolute;
  top: -43.5px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 43.5px solid #000;
}

.hexagon::after {
  content: "";
  position: absolute;
  bottom: -43.5px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 43.5px solid #000;
}

/* 设置六边形在网格中的位置和间距 */
.hexagon:nth-child(1) {
  top: 0;
  left: 0;
  margin: 10px;
}

<!-- 其他六边形的位置和间距... -->