先看效果~~啦啦啦~~

第一步：一个正常的导航

HTML结构：

<nav class="mainNav">
    <ul>
        <li><a href="#"><span>首页</span></a></li>
        <li><a href="#"><span>公司介绍</span></a></li>
        <li><a href="#"><span>产品展示</span></a></li>
        <li><a href="#"><span>联系我们</span></a></li>
        <li><a href="#"><span>企业招聘</span></a></li>
    </ul>
</nav>

CSS：

*{
    margin: 0;
    padding: 0;
}
ul,li,ol{
    list-style: none;
}
a{
    text-decoration: none;
}
.mainNav{
    height: 40px;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}
.mainNav li{
    float: left;
    margin-right: 20px;
}
.mainNav a{
    color: #fff;
    background: #284da0;
    line-height: 40px;
    display: block;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 16px;
}
.mainNav a:hover{
    background: #18305f;
}

第二步：让导航项倾斜。

修改 li 的样式：

.mainNav li{
    float: left;
    margin-right: 20px;
    transform: skewX(-30deg);   /* 沿着 x 方向，倾斜 -30deg */
}

第三步：让文字摆正

文字也跟着倾斜了，这个不好。要让文字反向倾斜 30deg。添加CSS：

.mainNav li span{
    transform: skewX( 30deg);   /*让文字反向倾斜 30deg */
    display: block;  /* skew 倾斜只对块级元素有效 */
}

第四步：适当美化

最后在美化下，不要超链接的四个角那么硬。

.mainNav a{
    ...省略其他代码...
    border-radius: 10px 0;   /* 左上 右下 10px圆角，右上 左下直角 */
}

完工~

觉得好，点个赞再走呗~