[分享]css六边形花瓣

CSS六边形花瓣在网页设计中是一种非常美观且实用的元素，可以用来装饰背景、阴影、图标等。下面我们来看一下如何使用CSS实现六边形花瓣。.hexagon { width: 80px; height: 4...

CSS六边形花瓣在网页设计中是一种非常美观且实用的元素，可以用来装饰背景、阴影、图标等。下面我们来看一下如何使用CSS实现六边形花瓣。

.hexagon {
  width: 80px;
  height: 44px;
  position: relative;
  margin-bottom: 10px;
  overflow: hidden;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
}

.hexagon:before {
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  transform: rotate(60deg);
}

.hexagon:after {
  width: 70.71%;
  height: 70.71%;
  background: #ffffff;
  top: 15%;
  left: 15%;
  border: 2px solid #ccc;
  transform: rotate(-60deg);
}

.hexagon:hover:after {
  background: #e6e6e6;
} 

上述代码中，我们首先定义了一个六边形容器（.hexagon），并将其高度设置为容器宽度的一半，这样才能形成一个正六边形。同时，我们将容器的overflow属性设置为hidden，以避免花瓣在容器外部显示出来。

然后，我们使用:before和:after伪类元素来分别表示六边形的内部和外部，这两个元素都需要使用绝对定位来放置。在:before元素中，我们使用transform属性来将元素旋转60度，从而使其成为一个六边形。而在:after元素中，我们设置了背景色、大小、位置和边框等样式。

最后，我们为容器设置了一个:hover伪类，用于在鼠标悬停时改变:after元素的背景色，以实现交互效果。