[分享]css六边形实战技巧

六边形是一个非常有趣的形状，在很多设计中都会用到。如何使用 CSS 来制作一个完美的六边形呢？以下是一些实战技巧：1. 使用 transform 属性使用 transform 属性可以将一个正方形旋转...

六边形是一个非常有趣的形状，在很多设计中都会用到。如何使用 CSS 来制作一个完美的六边形呢？
以下是一些实战技巧：
1. 使用 transform 属性
使用 transform 属性可以将一个正方形旋转 30 度，然后再把左右两个顶点往外移动一定距离，就可以变成一个完美的六边形了。
代码如下：

.hexagon {
  width: 100px;
  height: 100px;
  background-color: #333;
  transform: rotate(30deg);
  margin: 20px 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: 50px solid #333;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 50px solid #333;
} 

效果如下：
2. 使用 clip-path 属性
使用 clip-path 属性可以直接裁剪出一个六边形。
代码如下：

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

效果如下：
3. 使用伪元素
使用伪元素可以将一个正方形分成两个三角形，再用绝对定位将两个三角形组合成一个六边形。
代码如下：

.hexagon {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 20px 0;
  background-color: #333;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  background-color: #333;
}

.hexagon:before {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #333;
  top: 0;
  left: 0;
}

.hexagon:after {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid #333;
  bottom: 0;
  left: 0;
} 

效果如下：
以上就是几种制作六边形的实战技巧。希望对大家有所帮助！