先看效果~~啦啦啦~~
第一步:一个正常的导航
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圆角,右上 左下直角 */
}
完工~
觉得好,点个赞再走呗~