当前位置：首页 > CSS

css制作六边形

2026-01-08 17:46:10CSS

使用CSS创建六边形的方法

通过CSS的clip-path属性可以轻松实现六边形效果。以下是一个基础示例：

.hexagon {
  width: 100px;
  height: 55px;
  background-color: #6a6;
  position: relative;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

响应式六边形实现

通过::before和::after伪元素创建比例固定的六边形：

css制作六边形

.hexagon-responsive {
  width: 20%;
  background-color: #3498db;
  position: relative;
}

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

.hexagon-responsive::before {
  bottom: 100%;
  border-bottom: 28.87% solid #3498db;
}

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

六边形图片容器

将图片裁剪为六边形形状：

css制作六边形

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

旋转六边形动画

添加CSS动画使六边形旋转：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hexagon-animated {
  animation: spin 4s linear infinite;
}

六边形网格布局

创建蜂窝状排列的六边形网格：

.hex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
  transform: rotate(90deg);
}

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

这些方法提供了从基础到进阶的六边形实现方案，可根据具体需求选择合适的方式。clip-path方案在现代浏览器中兼容性较好，而伪元素方案在需要支持旧版浏览器时更为实用。