[分享]css3多边形导航教程

CSS3提供了十分简便而炫酷的多边形导航效果，下面我们就来看一下如何实现。/ 先定义一个样式用来清除默认的ul样式 / ul { liststyle: none; margin: 0; padding...

CSS3提供了十分简便而炫酷的多边形导航效果，下面我们就来看一下如何实现。

/* 先定义一个样式用来清除默认的ul样式 */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
 
/* 定义多边形导航容器的样式 */
.navContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
 
/* 定义导航条每个项的样式，包括背景颜色、宽高、旋转、以及细节。*/
.navItem {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 30px;
  cursor: pointer;
  background-color: #ec6668;
  transition: transform .5s ease-in-out;
}
 
.navItem:hover{
  transform: rotate(45deg) scale(1.3);
}
 
/* 定义导航条数值和超链接名称的样式 */
.navItem::before {
  content: attr(data-nav);
  position: absolute;
  bottom: -26px;
  left: -50px;
  width: 200px;
  text-align: center;
  background-color: #fff;
  color: #ec6668;
  border-radius: 3px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
  pointer-events: none; /* 避免点击该元素时触发带链接的元素事件 */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s ease-in-out, transform .3s ease-in-out;
}
 
.navItem:hover::before {
  opacity: 1;
  transform: translateY(0);
}
 
/* 定义导航条斜边样式 */
.navItem::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 100px 100px;
  border-color: transparent transparent transparent #ec6668;
} 

以上CSS代码就是实现多边形导航的关键，接下来是HTML代码：

<div class="navContainer">
  <ul>
    <li class="navItem" data-nav="Home">
      <a href="#">Home</a>
    </li>
    <li class="navItem" data-nav="About">
      <a href="#">About</a>
    </li>
    <li class="navItem" data-nav="Services">
      <a href="#">Services</a>
    </li>
    <li class="navItem" data-nav="Portfolio">
      <a href="#">Portfolio</a>
    </li>
    <li class="navItem" data-nav="Contact">
      <a href="#">Contact</a>
    </li>
  </ul>
</div> 

多边形导航的HTML结构还是比较基础，我们只需要在每个li标签上添加一个class“navItem”，再在每个li标签上添加一个data属性作为导航条的数值就行了。

通过以上的代码，我们就可以轻松的实现一个css3多边形导航效果。如果你有更好的实现方式，欢迎一起交流探讨。