[分享]css六边形特效

CSS六边形特效是一种非常炫酷的效果，可以让你的网页看起来更加动态。在CSS中，六边形是由圆角正方形旋转并裁剪而成，而裁剪则是通过使用clippath属性来实现的。.hexagon { width: ...

CSS六边形特效是一种非常炫酷的效果，可以让你的网页看起来更加动态。在CSS中，六边形是由圆角正方形旋转并裁剪而成，而裁剪则是通过使用clip-path属性来实现的。

.hexagon {
  width: 120px;
  height: 69.28px;
  background: #ffffff;
  position: relative;
  margin: 34.64px 0;
  border-left: solid 1px #d2d2d2;
  border-right: solid 1px #d2d2d2;
}
.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 84.85px;
  height: 84.85px;
  border-top: solid 1px #d2d2d2;
  border-bottom: solid 1px #d2d2d2;
  background: #ffffff;
}
 
/*上下六边形*/
.hexagon:before {
  top:-42.42px;
  left:0;
  border-left: solid 1px #d2d2d2;
  transform: rotate(-60deg);
}
.hexagon:after {
  bottom: -42.42px;
  left: 0;
  border-right: solid 1px #d2d2d2;
  transform: rotate(60deg);
} 

以上就是六边形特效的CSS代码，其中，我们设置了一个盒子（.hexagon），并使用伪元素（:before和:after）添加了上下两个六边形的形状。接着，我们通过CSS的transform属性对六边形进行旋转。

需要注意的是，如果你想要裁剪成六边形形状，那么你需要用到CSS的clip-path属性。clip-path属性可以让你将盒子裁剪成任意形状，从而实现各种酷炫的效果。

总之，CSS六边形特效是一种非常棒的效果，可以提升你的网页设计水平。现在就试着使用以上的代码，在你的网页中添加一个六边形特效吧！