[分享]css六边形边框阴影

CSS六边形边框阴影是一种常见的设计技术，可以实现复杂的边框样式。下面我们来详细了解如何使用CSS来实现这种效果。.hexagon { : relative; width: 200px; height...

CSS六边形边框阴影是一种常见的设计技术，可以实现复杂的边框样式。下面我们来详细了解如何使用CSS来实现这种效果。

.hexagon {
  position: relative;
  width: 200px;
  height: 115.47px;
  background-color: #ccc;
  margin: 57.74px 0;
}

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

.hexagon:before {
  bottom: 100%;
  border-bottom: 57.74px solid #ccc;
}

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

.hexagon:hover {
  box-shadow: 0 0 10px #ccc;
} 

上面的代码使用了伪类技术来实现六边形。.hexagon类的宽度和高度分别为200px和115.47px。.hexagon:before和.hexagon:after使用了绝对定位，并且宽度为0像素，这样就形成了一个三角形的形状。通过设置border属性，可以控制边框的颜色和宽度。

最后，当鼠标悬停在六边形上时，使用box-shadow属性可以添加阴影效果，让六边形看起来更立体。