[分享]css不规则网站导航怎么做

CSS不规则网站导航是现在比较流行的设计风格之一，它能够为网站的视觉效果带来新的感觉，让网站更具有创意和个性化。接下来，我们来学习一下如何制作CSS不规则网站导航。html： 首页 产品中心 关于我...

CSS不规则网站导航是现在比较流行的设计风格之一，它能够为网站的视觉效果带来新的感觉，让网站更具有创意和个性化。接下来，我们来学习一下如何制作CSS不规则网站导航。

html：
<ul class="nav-menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品中心</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
  <li><a href="#">新闻动态</a></li>
</ul>

css：
.nav-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0;
}

.nav-menu li {
  position: relative;
  list-style: none;
  margin: 0 20px;
}

.nav-menu li:before {
  content: ';
  position: absolute;
  top: 0;
  left: -10px;
  height: 100%;
  width: 10px;
  background-color: #333;
  transform-origin: left center;
  transform: skew(-35deg);
}

.nav-menu li:after {
  content: ';
  position: absolute;
  top: 0;
  right: -10px;
  height: 100%;
  width: 10px;
  background-color: #333;
  transform-origin: right center;
  transform: skew(35deg);
}

.nav-menu li a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
}

.nav-menu li a:hover:before {
  width: 20px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.nav-menu li a:hover:after {
  width: 20px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.nav-menu li:first-child:before {
  transform-origin: left center;
  transform: skew(35deg);
}

.nav-menu li:last-child:after {
  transform-origin: right center;
  transform: skew(-35deg);
} 

上述代码中，我们首先定义了一个包含多个li标签的无序列表，然后在CSS中使用了flex布局，并且把LI子项在父容器中居中对齐。接着，我们给每个LI子项添加了:before和:after两个伪元素，在伪元素中设置了各自的背景颜色，并用transform属性的skew方法将伪元素倾斜了35度或-35度。这样就能够实现左右斜切的效果。最后，我们还添加了:hover事件，当鼠标滑过选项时，就能够通过CSS中设置的过渡效果来增加箭头的长度。

这样，我们就学习了如何制作CSS不规则网站导航。希望本篇教程对大家有所帮助。