<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯css实现平行四边形导航</title>
<style type="text/css">
ul,li {margin:0;padding:0;list-style:none;}
a {text-decoration:none;color:#333;}
.arrow {width:0;height:0;overflow:hidden;border-width:20px;border-color:transparent;border-style:solid;_border-style:dashed;}
.nav {width:800px;height:40px;margin:0 auto;}
.nav li {width:160px;height:40px;float:left;}
.nav a {width:160px;height:40px;float:left;line-height:40px;position:relative;display:block;font-size:14px;text-align:center;cursor:pointer;overflow:hidden;}
.nav span {width:80px;height:40px;margin:0 40px;display:block;overflow:hidden;}
.nav .arrow {position:absolute;display:none;}
.nav a:hover {font-size:100%;}
.nav .arrow-left {top:0;left:0;border-top-color:#f60;border-right-color:#f60;}
.nav .arrow-right {bottom:0;right:0;border-bottom-color:#f60;border-left-color:#f60;}
.nav a:hover span,
.nav .cur span {background-color:#f60;color:#fff;}
.nav a:hover .arrow,
.nav .cur .arrow {display:block;}
</style>
</head>
<body>
<ul class="nav">
<li class="cur">
<a href="#">
<span>网站首页</span>
<i class="arrow arrow-left"></i>
<i class="arrow arrow-right"></i>
</a>
</li>
<li>
<a href="#">
<span>公司简介</span>
<i class="arrow arrow-left"></i>
<i class="arrow arrow-right"></i>
</a>
</li>
<li>
<a href="#">
<span>产品展示</span>
<i class="arrow arrow-left"></i>
<i class="arrow arrow-right"></i>
</a>
</li>
<li>
<a href="#">
<span>联系我们</span>
<i class="arrow arrow-left"></i>
<i class="arrow arrow-right"></i>
</a>
</li>
</ul>
</body>
</html>
浙公网安备 33010602011771号