斜切的导航
昨天看到别人做的斜切导航，于是今天就自己写了一个，分享在这里，大家可以互相学习，多多指教。
斜切的导航其实并不难，主要是要掌握transform变形里面的斜切（skew），就能做出来了。
效果图
下面请看我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>斜切的导航</title>
<style>
ul,li{
list-style: none;
}
a{
text-decoration: none;
}
*{
margin: 0;
padding: 0;
overflow: hidden;
}
div{
width: 460px;
margin: 30px auto;
}
ul li{
float: left;
text-align: center;
margin-left: 10px;
padding: 10px 30px;
transform: skew(-30deg);
background: #b1793c;
}
ul li a{
color: #fff;
display: block;
transform: skew(30deg);/*不让文字倾斜*/
}
ul li:first-child{
margin-left: -15px;
}
ul li:last-child{
margin-right: -30px;
}
</style>
</head>
<body>
<div>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">公司介绍</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">新闻资讯</a></li>
</ul>
</div>
</body>
</html>
5366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
