当前位置：首页 > CSS

css制作六边形

2026-02-26 21:52:23CSS

使用 CSS 制作六边形

通过 CSS 的 clip-path 属性或伪元素旋转可以轻松实现六边形效果。以下是两种常见方法：

方法一：使用 `clip-path`

直接通过 clip-path 定义六边形的路径坐标，适合现代浏览器。

.hexagon {
  width: 100px;
  height: 110px;
  background-color: #3498db;
  clip-path: polygon(
    50% 0%, 
    100% 25%, 
    100% 75%, 
    50% 100%, 
    0% 75%, 
    0% 25%
  );
}

参数说明：

polygon() 定义六边形的六个顶点坐标，按顺时针或逆时针顺序排列。
百分比值基于元素的宽高，50% 表示中点。

方法二：伪元素旋转

通过旋转两个矩形叠加形成六边形，兼容性更好。

.hexagon {
  width: 100px;
  height: 60px;
  background-color: #3498db;
  position: relative;
}

.hexagon::before,
.hexagon::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: inherit;
}

.hexagon::before {
  transform: rotate(60deg);
}

.hexagon::after {
  transform: rotate(-60deg);
}

注意事项：

伪元素需设置与父元素相同的背景色。
调整 width 和 height 比例可改变六边形形状。

扩展：添加边框

若需六边形边框，可用额外嵌套元素或 outline 配合 clip-path：

.hexagon-border {
  width: 102px;
  height: 112px;
  clip-path: polygon(
    50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%
  );
  background: linear-gradient(45deg, #3498db, #2ecc71);
}

.hexagon-inner {
  width: 98px;
  height: 108px;
  clip-path: inherit;
  background: white;
  position: relative;
  top: 2px;
  left: 2px;
}

提示：

css制作六边形