[分享]css中导航栏为平行四边形

CSS中，导航栏有许多种不同的样式，其中一种独特的样式是让导航栏变成平行四边形。使用CSS，我们可以很容易地给导航栏展示这种独特的外观。.nav{ backgroundcolor:333; heigh...

CSS中，导航栏有许多种不同的样式，其中一种独特的样式是让导航栏变成平行四边形。使用CSS，我们可以很容易地给导航栏展示这种独特的外观。

.nav{
    background-color:#333;
    height:50px;
    width:100%;
    display:flex;
    justify-content:space-between;
    transform:skew(-30deg);
    margin-top:50px;
}
.nav-item{
    background-color:#f0f0f0;
    height:50px;
    width:20%;
    text-align:center;
    transform:skew(30deg);
} 

以上是要实现一个平行四边形导航栏的代码。在上面的代码中，我们利用了CSS的transform属性来实现平行四边形的效果。首先，我们在.nav的样式中将导航栏整体变形，角度为-30度，将导航栏牢牢地变形为一个平行四边形。在.nav-item的样式中，我们将每个导航项目都反向变形，让他们呈现垂直状态，以便真正地使用。

到目前为止，我们的平行四边形导航栏已经成功地呈现了，但它看起来还不太正常——导航项已经移到了错误的位置。我们需要利用CSS中的flexbox布局来修复这个问题。因此，我们在.nav的CSS中，使用display:flex和justify-content:space-between来使导航项在水平方向上平分导航栏，控制它们在平行四边形上正确地放置。最后，我们简单地插入了一些背景颜色代码，以便看到我们的导航栏正在显式一些东西。

总之，在CSS中创建一个平行四边形导航栏是非常简单和有趣的，它可以带给你的网站一些不同寻常的魅力，以及提供一个显眼的优化。