[分享]CSS六边形旋转

CSS六边形旋转可以让网页元素看起来更加有生命力，而且相对于其他形状，六边形更加规整美观。以下是一个使用CSS实现六边形旋转的例子：.hexagon { width: 100px; height: 5...

CSS六边形旋转可以让网页元素看起来更加有生命力，而且相对于其他形状，六边形更加规整美观。以下是一个使用CSS实现六边形旋转的例子：

.hexagon {
  width: 100px;
  height: 55px;
  position: relative;
  margin: 27.5px 0;
  background-color: #6C6;
  float: left;
  transform: rotate(-30deg) skewX(30deg);
  transform-origin: 0 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: 27.5px solid #6C6;
}
.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 27.5px solid #6C6;
} 

其中，rotate(-30deg)和skewX(30deg)的组合是旋转六边形的关键。这两个属性使用起来有些棘手，但是只要理解它们的作用后，就能轻松地对六边形进行相应的调整。值得一提的是，:before和:after是伪元素，它们可以在元素的前后创建额外的样式。在本例中，我们使用这两个伪元素绘制六边形的上下两个面部分，并使用border-left和border-right来设置六边形的宽度。

综上所述，通过使用CSS六边形旋转，我们可以轻松制作出美观、动态的网页元素，为网页增添一份视觉上的亮点。