css平行四边形导航条

CSS平行四边形导航条是一种比较流行的网页设计风格，它能够为网站带来几何美感和现代感。下面我们就来介绍一下如何使用CSS实现平行四边形导航条。

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav li {
  position: relative;
  margin: 0 20px;
}

.nav li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 18px;
  color: #333;
  transform: skewX(-20deg);
}

.nav li::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20px;
  width: 20px;
  height: 100%;
  background-color: #e74c3c;
  transform: skewX(-20deg);
}

.nav li::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -20px;
  width: 20px;
  height: 100%;
  background-color: #e74c3c;
  transform: skewX(-20deg);
}

首先，我们定义了一个.nav类作为导航条的容器，使用Flex布局使导航项居中对齐。然后，我们为每个导航项定义了一个绝对定位的:before和:after伪元素，它们的宽度为20px，高度为100%，颜色为#e74c3c。最后，我们对导航项中的a标签应用了skewX(-20deg)变形，使其倾斜20度，达到平行四边形的效果。

通过上述代码，我们就可以轻松地实现一个漂亮的CSS平行四边形导航条啦。如果你想要进一步美化导航条，可以通过修改颜色和字体大小等属性实现。