[分享]css六边形悬停定位

在网站设计中，六边形形状常常被用于制作图标、按钮和背景等。本文将介绍如何利用CSS实现六边形的悬停效果，并定位在指定位置。.hexagon { : relative; width: 120px; he...

在网站设计中，六边形形状常常被用于制作图标、按钮和背景等。本文将介绍如何利用CSS实现六边形的悬停效果，并定位在指定位置。

.hexagon {
  position: relative;
  width: 120px;
  height: 69.28px;
  background-color: #555;
  margin: 34.64px 0;
}

.hexagon::before,
.hexagon::after {
  content: "";
  position: absolute;
  top: -34.64px;
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 34.64px solid #555;
}

.hexagon::after {
  top: 69.28px;
  border-top: 34.64px solid #555;
  border-bottom: 0;
}

.hexagon:hover {
  background-color: #999;
}

.hexagon:hover::before,
.hexagon:hover::after {
  border-bottom-color: #999;
} 

如上所示，在CSS中，我们通过使用伪元素::before和::after来制作六边形的上下两角。我们先设定六边形的高度和宽度，以及背景颜色和边距。接着，通过为::before和::after设置border属性，来实现上下两角的六边形形状。为了使上角与下角拼接成六边形，我们需要让它们的宽度都为60px，就能保持六边形边长相等。

当用户悬停在六边形上时，我们改变了背景颜色，并把::before和::after的边框颜色改变为悬停后的颜色，从而实现了六边形的悬停效果。如果需要将六边形定位在指定位置（如网页的右侧），我们只需要将六边形的容器添加position: fixed;和right: 0;属性，即可将它定位到右侧。