六边形怎么用 CSS 写

在前端开发中，六边形是一种非常常见的图形元素。它经常出现在科技感页面、蜂窝布局、数据可视化卡片、头像容器、导航菜单、标签组件以及游戏 UI 中。相比直接使用图片，使用 CSS 绘制六边形有很多优点：体积小、可响应式缩放、颜色容易修改、支持动画、适合组件化封装，并且在高清屏幕上不会失真。

那么，六边形怎么用 CSS 写？本文将从基础原理讲起，介绍多种常用实现方式，包括 border 方案、clip-path 方案、伪元素方案以及蜂窝布局写法，帮助你在实际项目中灵活选择。

一、六边形的基本形状理解

六边形通常分为两种视觉方向：

1. 尖角朝上 / 朝下的六边形
2. 平边朝上 / 朝下的六边形

例如：

尖角朝上：

   /\
  /  \
  \  /
   \/

平边朝上：

  ____
 /    \
 \____/

在 CSS 中绘制六边形，本质上就是通过某种方式把一个矩形元素“裁剪”或“拼接”成六边形。

常见思路有三种：

• 使用 clip-path: polygon() 裁剪矩形；
• 使用 border 画三角形，再拼接成六边形；
• 使用伪元素 ::before 和 ::after 组合图形。

在现代项目中，最推荐的是 clip-path，因为写法简单、直观、可维护性高。

二、最推荐写法：使用 clip-path 绘制六边形

clip-path 是 CSS 中非常强大的裁剪属性，可以把一个元素裁剪成任意多边形。

1. 平边朝上的六边形

HTML 结构非常简单：

CSS：

.hexagon {
  width: 200px;
  height: 120px;
  background: #409eff;
  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );
}

效果就是一个平边朝上的六边形。

这里的 polygon() 表示多边形裁剪区域，里面每一组坐标代表一个点：

polygon(
  25% 0%,    /* 左上斜边起点 */
  75% 0%,    /* 右上斜边起点 */
  100% 50%,  /* 右侧尖点 */
  75% 100%,  /* 右下斜边终点 */
  25% 100%,  /* 左下斜边终点 */
  0% 50%     /* 左侧尖点 */
)

它们连起来后，就形成了一个标准的六边形。

2. 尖角朝上的六边形

如果你想要尖角朝上的六边形，可以调整坐标：

.hexagon-point {
  width: 120px;
  height: 200px;
  background: #67c23a;
  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
}

这个六边形的第一个点在顶部中央，也就是：

50% 0%

所以它看起来是“尖角朝上”的。

三、给六边形添加文字内容

六边形并不一定只是装饰图形，它也可以作为卡片、按钮或图标容器。

  CSS

.hex-card {
  width: 180px;
  height: 110px;
  background: linear-gradient(135deg, #409eff, #7c4dff);
  color: #fff;
  font-size: 28px;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;

  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );
}

这里使用了 flex 来让文字水平垂直居中。

需要注意的是，clip-path 只会裁剪视觉区域，但元素本身的盒模型仍然是矩形。如果你给六边形绑定点击事件，默认情况下部分透明区域也可能响应事件。不过现代浏览器中，对于 clip-path 裁剪后的区域，点击测试通常会按照可见区域处理，但在复杂场景下仍建议测试不同浏览器表现。

四、带边框的六边形怎么写

很多时候我们不只是需要一个纯色六边形，还需要一个带边框的六边形。直接给使用 clip-path 的元素加 border，通常不会得到理想效果，因为边框仍然基于原始矩形盒子。

比较常见的做法是使用两个重叠的六边形：外层作为边框，内层作为内容。

HTML

  

    内容
  

CSS

.hex-border {
  width: 220px;
  height: 130px;
  background: #303133;
  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );

  display: flex;
  align-items: center;
  justify-content: center;
}

.hex-inner {
  width: 206px;
  height: 116px;
  background: #fff;
  color: #303133;

  display: flex;
  align-items: center;
  justify-content: center;

  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );
}

这样外层露出来的部分就会形成边框效果。

如果希望边框更细，只需要调整内层的宽高即可；如果希望边框是渐变色，可以给外层设置渐变背景。

.hex-border {
  background: linear-gradient(135deg, #00c6ff, #0072ff);
}

五、使用 CSS 变量封装六边形

在实际项目中，六边形可能会在多个地方使用。为了提升可维护性，可以使用 CSS 变量封装尺寸和颜色。

  HTML



  Vue

.hex {
  width: var(--w, 200px);
  height: var(--h, 120px);
  background: var(--bg, #409eff);
  color: #fff;
  font-size: 22px;
  font-weight: 600;

  display: flex;
  align-items: center;
  justify-content: center;

  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );
}

这样你就可以通过内联变量或者父级变量快速控制不同六边形的样式。

六、使用 border 拼接六边形

在 clip-path 普及之前，很多人会使用 border 绘制三角形，再把矩形和两个三角形组合成六边形。

这种方法的原理是：CSS 中如果一个元素宽高为 0，只设置边框，那么不同方向的边框会组成三角形。

例如：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid #409eff;
}

接下来我们可以用中间矩形加上下两个三角形拼出一个六边形。

HTML

CSS

.hex-old {
  position: relative;
  width: 120px;
  height: 70px;
  background: #409eff;
  margin: 40px;
}

.hex-old::before,
.hex-old::after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  height: 0;

  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
}

.hex-old::before {
  bottom: 100%;
  border-bottom: 35px solid #409eff;
}

.hex-old::after {
  top: 100%;
  border-top: 35px solid #409eff;
}

这个方法兼容性较好，但缺点也明显：

• 尺寸计算较麻烦；
• 不适合做复杂背景；
• 内容居中比较麻烦；
• 加边框、阴影和渐变不够方便；
• 响应式维护成本高。

因此，在现代项目中，如果不需要兼容非常旧的浏览器，优先推荐 clip-path。

七、六边形图片头像怎么写

六边形头像也是很常见的需求。使用 clip-path 可以直接裁剪图片。

.hex-avatar {
  width: 160px;
  height: 160px;
  object-fit: cover;
  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
}

如果图片比例不固定，一定要加上：

object-fit: cover;

这样可以避免图片被拉伸变形。

如果你想让头像带边框，可以使用外层容器：

.avatar-border {
  width: 180px;
  height: 180px;
  background: linear-gradient(135deg, #00dbde, #fc00ff);
  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );

  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-border img {
  width: 166px;
  height: 166px;
  object-fit: cover;

  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
}

八、六边形按钮效果

六边形也可以用来做按钮，尤其适合科技风页面。

立即开始

.hex-button {
  width: 180px;
  height: 56px;
  border: none;
  outline: none;
  cursor: pointer;

  background: #409eff;
  color: #fff;
  font-size: 18px;
  font-weight: 600;

  clip-path: polygon(
    12% 0%,
    88% 0%,
    100% 50%,
    88% 100%,
    12% 100%,
    0% 50%
  );

  transition: all 0.3s ease;
}

.hex-button:hover {
  background: #66b1ff;
  transform: translateY(-2px);
}

.hex-button:active {
  transform: translateY(0);
}

因为按钮比较扁，所以这里的六边形坐标改成了：

12% 0%,
88% 0%

如果仍然使用 25% 和 75%，按钮两侧斜边会太长，看起来不够自然。实际项目中要根据元素比例调整坐标。

九、蜂窝布局怎么写

六边形最经典的应用场景之一就是蜂窝布局。蜂窝布局的关键在于：相邻行之间需要水平错位，并且上下距离要适当重叠或靠近。

下面给出一个简单示例。

HTML

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8

CSS

.honeycomb {
  width: 560px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cell {
  width: 120px;
  height: 104px;
  background: #409eff;
  color: #fff;
  font-size: 24px;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;

  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );
}

.cell:nth-child(8n + 5) {
  margin-left: 66px;
}

这个例子中，第 5 个元素开始的第二行左侧增加了 margin-left，从而形成错位效果。

不过在真实项目中，蜂窝布局会受到列数、宽度、间距的影响。如果要求非常精确，可以考虑使用 CSS Grid 或者通过 JavaScript 计算位置。

十、使用 CSS Grid 实现更稳定的蜂窝布局

如果六边形数量较多，flex 可能不够容易控制。可以借助 grid 来管理布局。

  
A
  
B
  
C
  
D
  
E
  
F

.hex-grid {
  display: grid;
  grid-template-columns: repeat(3, 120px);
  column-gap: 12px;
  row-gap: 10px;
}

.hex-item {
  width: 120px;
  height: 104px;
  background: linear-gradient(135deg, #409eff, #36cfc9);
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );
}

.hex-item:nth-child(2n) {
  transform: translateY(58px);
}

这个写法通过让偶数项下移，制造出蜂窝错位感。具体偏移量需要根据六边形高度和间距调整。

十一、带阴影的六边形怎么写

很多开发者会遇到一个问题：给 clip-path 六边形加 box-shadow，阴影看起来不明显，甚至不符合六边形轮廓。

原因是 box-shadow 是基于元素原始矩形盒子绘制的，而不是基于裁剪后的多边形轮廓。

解决方案之一是使用 filter: drop-shadow()：

  
阴影

.hex-shadow-wrap {
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25));
}

.hex-shadow {
  width: 180px;
  height: 110px;
  background: #409eff;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );
}

drop-shadow() 会根据元素的可见形状生成阴影，所以更适合六边形这类非矩形图形。

十二、六边形动画效果

CSS 六边形还可以很方便地加入动画，例如悬浮放大、旋转、渐变流动等。

Hover

.hex-animate {
  width: 180px;
  height: 110px;
  background: linear-gradient(135deg, #409eff, #7c4dff);
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );

  transition: transform 0.3s ease, filter 0.3s ease;
}

.hex-animate:hover {
  transform: scale(1.08) rotate(3deg);
  filter: brightness(1.1);
}

如果想做循环动画：

.hex-animate {
  animation: floatHex 2.5s ease-in-out infinite;
}

@keyframes floatHex {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

十三、兼容性说明

clip-path: polygon() 在现代浏览器中已经有较好的支持，包括 Chrome、Edge、Firefox、Safari 等。如果你的项目主要面向现代浏览器，完全可以放心使用。

但如果项目需要兼容非常旧的浏览器，例如旧版 IE，那么 clip-path 就不适合了。此时可以考虑：

1. 使用 border 拼接方案；
2. 使用 SVG；
3. 使用图片背景；
4. 使用 Canvas 绘制。

其中 SVG 也是一个非常优秀的选择，尤其适合需要精确边框、描边、渐变和复杂交互的场景。

十四、实际项目中如何选择方案

不同方案适合不同场景：

如果只是写一个普通六边形卡片、按钮、头像，推荐使用：

clip-path: polygon(
  25% 0%,
  75% 0%,
  100% 50%,
  75% 100%,
  25% 100%,
  0% 50%
);

如果是尖角朝上的六边形，推荐使用：

clip-path: polygon(
  50% 0%,
  100% 25%,
  100% 75%,
  50% 100%,
  0% 75%,
  0% 25%
);

十五、完整示例代码

下面给出一个较完整的示例，包含六边形卡片、渐变背景、文字居中、悬浮动画和阴影。

  
CSS
  
HTML
  
JS

.hex-demo {
  display: flex;
  gap: 24px;
  padding: 40px;
}

.hex-item {
  width: 180px;
  height: 110px;

  background: linear-gradient(135deg, #409eff, #7c4dff);
  color: #fff;
  font-size: 24px;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;

  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );

  transition: transform 0.3s ease, filter 0.3s ease;
}

.hex-item:hover {
  transform: translateY(-8px) scale(1.05);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.25));
}

如果你直接把这段代码放进页面中，就可以看到三个带渐变背景的六边形卡片，并且鼠标悬浮时会有轻微上浮效果。

十六、总结

用 CSS 写六边形，最简单、最现代的方式就是使用 clip-path: polygon()。它可以通过六个坐标点裁剪出六边形，语义清晰，代码量少，并且很适合搭配渐变、图片、动画和响应式布局。

如果你只需要一个普通平边六边形，可以直接使用：

.hexagon {
  width: 200px;
  height: 120px;
  background: #409eff;
  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );
}

如果你需要尖角朝上的六边形，可以使用：

.hexagon {
  width: 120px;
  height: 200px;
  background: #409eff;
  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
}

在实际开发中，建议根据需求选择合适方案：

• 普通六边形：优先用 clip-path；
• 需要兼容旧浏览器：考虑 border 或 SVG；
• 需要精确描边和复杂图形：推荐 SVG；
• 需要图片裁剪：clip-path 搭配 object-fit；
• 需要阴影：使用 filter: drop-shadow()。

掌握这些写法后，无论是六边形按钮、六边形头像、蜂窝布局还是科技风卡片，都可以很方便地用 CSS 实现。