当前位置：首页 > CSS

css如何制作六边形

2026-02-27 02:35:10CSS

使用CSS制作六边形

在CSS中制作六边形可以通过多种方法实现，以下是几种常见的技术方案：

使用`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函数定义六个顶点坐标，形成六边形。
百分比值基于元素的宽度和高度，确保形状自适应。

使用伪元素和旋转

通过旋转两个矩形并叠加，可以模拟六边形的外观。

.hexagon {
  position: relative;
  width: 100px;
  height: 57.74px;
  background-color: #3498db;
  margin: 28.87px 0;
}

.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 #3498db;
}

.hexagon:after {
  top: 100%;
  border-top: 28.87px solid #3498db;
}

主元素是一个水平的矩形，宽度为100px，高度为57.74px（六边形高度与边长的比例关系）。
伪元素通过边框三角形模拟六边形的上下部分。

使用SVG内联

SVG天然支持多边形绘制，可以嵌入HTML并通过CSS控制样式。

<svg width="100" height="110" viewBox="0 0 100 110">
  <polygon points="50 0, 100 25, 100 75, 50 100, 0 75, 0 25" fill="#3498db" />
</svg>

points属性定义六边形的六个顶点坐标。
SVG的优势是缩放无损，适合响应式设计。

使用CSS变量实现动态调整

通过CSS变量可以灵活调整六边形的大小和颜色。

:root {
  --hex-width: 100px;
  --hex-color: #3498db;
}

.hexagon {
  width: var(--hex-width);
  height: calc(var(--hex-width) * 1.1);
  background-color: var(--hex-color);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}