[分享]css六边形导航选项卡

CSS六边形导航选项卡是一种比较独特的导航方式，通过CSS的transform和clippath属性可以很容易地实现。以下是HTML代码： 选项1 选项2 选项3 选项4 接下来是CSS代码：....

CSS六边形导航选项卡是一种比较独特的导航方式，通过CSS的transform和clip-path属性可以很容易地实现。以下是HTML代码：

<div class="hex-tabs">
  <ul>
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
    <li><a href="#">选项4</a></li>
  </ul>
</div> 

接下来是CSS代码：

.hex-tabs {
  position: relative;
}
.hex-tabs ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hex-tabs li {
  position: relative;
  flex: 1;
  text-align: center;
  z-index: 1;
}
.hex-tabs li a {
  display: block;
  padding: 10px;
  background-color: #fff;
  position: relative;
  z-index: 2;
}
.hex-tabs li:before {
  content: ';
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background-color: #333;
  z-index: -1;
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
}
.hex-tabs li:hover:before {
  transform: translateY(0);
} 

通过clip-path属性实现了六边形的形状，通过transform属性实现了默认隐藏在选项上方且鼠标悬浮时从上方滑出来的效果，效果如下：

• 选项1
• 选项2
• 选项3
• 选项4