<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>纯CSS倾斜导航</title>
<style type="text/css">
body{background-color:#ccc;font-size:12px;}
.nav{float:left;margin-left:2px;height:0;line-height:0;border:0;border-left:25px solid transparent;border-bottom:25px solid #f50;}
.nav .link{float:left;margin-right:-25px;height:0;line-height:0;border:0;border-right:25px solid transparent;border-top:25px solid #f50;color:#000;text-decoration:none;}
.nav .link:hover{color:#09c;}
.nav .link span{display:block;margin-top:-25px;padding:0 10px;height:25px;line-height:25px;text-align:center;cursor:pointer;}/*IE6 HACK*/.nav{_border-left:25px solid dashed;}
.nav .link{_margin-bottom:-25px;_position:relative;_z-index:1;_border-right:25px solid dashed;}
.nav .link span{_float:left;_position:relative;_z-index:2;}
</style>
</head>
<body>
<div class="nav"><a href="#" target="_blank" class="link"><span>首页</span></a></div>
<div class="nav"><a href="#" target="_blank" class="link"><span>产品列表</span></a></div>
<div class="nav"><a href="#" target="_blank" class="link"><span>下载与支持</span></a></div>
<div class="nav"><a href="#" target="_blank" class="link"><span>好像还能自适应宽度，要多长可以有多长</span></a></div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>纯CSS倾斜导航</title>
<style type="text/css">
body{background-color:#ccc;font-size:12px;}
.nav{float:left;margin-left:2px;height:0;line-height:0;border:0;border-left:25px solid transparent;border-bottom:25px solid #f50;}
.nav .link{float:left;margin-right:-25px;height:0;line-height:0;border:0;border-right:25px solid transparent;border-top:25px solid #f50;color:#000;text-decoration:none;}
.nav .link:hover{color:#09c;}
.nav .link span{display:block;margin-top:-25px;padding:0 10px;height:25px;line-height:25px;text-align:center;cursor:pointer;}/*IE6 HACK*/.nav{_border-left:25px solid dashed;}
.nav .link{_margin-bottom:-25px;_position:relative;_z-index:1;_border-right:25px solid dashed;}
.nav .link span{_float:left;_position:relative;_z-index:2;}
</style>
</head>
<body>
<div class="nav"><a href="#" target="_blank" class="link"><span>首页</span></a></div>
<div class="nav"><a href="#" target="_blank" class="link"><span>产品列表</span></a></div>
<div class="nav"><a href="#" target="_blank" class="link"><span>下载与支持</span></a></div>
<div class="nav"><a href="#" target="_blank" class="link"><span>好像还能自适应宽度，要多长可以有多长</span></a></div>
</body>
</html>
475003427