css3的平行四边形

CSS3 能够实现许多有趣的效果，比如平行四边形。

平行四边形可以用来美化导航栏、按钮等元素。下面是一个简单的例子：

.nav-item {
  width: 80px;
  height: 50px;
  background-color: #333;
  transform: skewX(-20deg);
  margin-left: 10px;
  text-align: center;
  line-height: 50px;
  color: #fff;
}

在这个例子中，我们通过 transform 属性的 skewX 转换来制作平行四边形。skewX(-20deg) 表示将元素向左倾斜 20 度。

值得一提的是，这种方法只是视觉上的效果。实际上，元素还是一个矩形。如果需要使用到元素宽度或高度等属性，需要注意这个问题。

还有一种方法可以实现平行四边形的效果，就是使用 CSS3 的 clip-path 属性。这个属性可以制作非矩形的形状，比如圆形、三角形等等。下面是一个简单的例子：

.nav-item {
  width: 80px;
  height: 50px;
  background-color: #333;
  clip-path: polygon(0 0,100% 0,80% 100%,0 100%);
  margin-left: 10px;
  text-align: center;
  line-height: 50px;
  color: #fff;
}

在这个例子中，我们使用了 clip-path 属性，并将其值设置为一个用逗号分隔的多边形。在这个多边形中，前两个参数表示第一个点的 x 和 y 坐标，第三个参数表示第二个点的 x 和 y 坐标，依此类推。最后一个点可以省略，因为 clip-path 会自动将其补全。

以上就是两种制作平行四边形的方法，它们各有优缺点，具体使用时需要根据实际情况选择。