css平行四边形导航

CSS平行四边形导航是一种很酷炫的导航样式，在很多网页中都有应用。下面我们来介绍如何使用CSS来实现平行四边形导航。以下是实现代码：

.nav{
      background: #03a9f4;
      display: flex;
      justify-content: space-between;
      padding: 50px 100px;
}
.nav ul{
      display: flex;
      list-style: none;
      padding: 0;
      margin: 0;
}
.nav ul li{
      position: relative;
      margin: 0 15px;
}
.nav ul li a{
      color: #fff;
      text-decoration: none;
      font-size: 18px;
      padding: 10px 20px;
      display: block;
      transform: skew(-20deg);
}
.nav ul li:hover a{
      background: #fff;
      color: #03a9f4;
}
.nav ul li:hover a:before{
      transform: translateX(100%) skew(-20deg);
}
.nav ul li:hover a:after{
      transform: translateX(-100%) skew(-20deg);
}
.nav ul li a:before,.nav ul li a:after{
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 20px;
      background: #03a9f4;
      z-index: -1;
}
.nav ul li a:before{
      left: -10px;
}
.nav ul li a:after{
      right: -10px;
}
    

首先我们要创建一个导航的父元素，并设置背景色和padding值。剩余的样式都在其子元素中完成。

我们使用display:flex属性使导航变为一行，同时使用justify-content:space-between属性让导航项之间有间隔。接下来将ul列表设为flex，去掉ul的padding和margin。我们使用position:relative为每个导航项设置定位，使得其before和after伪元素可以绝对定位在其上。

接下来是设置导航项的a标签，我们使用transform:skew(-20deg)来使其变为平行四边形。同时我们也给a标签设置了padding、font-size、color等样式。在鼠标悬停时，我们将a标签的背景颜色和字体颜色改变。同时，我们使用:before和:after为每个a标签添加了两个伪元素，使其在左右两侧出现一个平行四边形的形状。并且使用transform:translateX()和transform:skew()来实现动画效果。

最后，我们将:before和:after伪元素的z-index设置为-1，使其被a标签覆盖。并且我们使用left和right属性为:before和:after伪元素左右分别设置了定位距离。

这就是CSS平行四边形导航的实现方法，是不是很简单呢！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！