1、实现效果
梯形背景图导航，如下图。由于导航条文字多少不固定，因此面临的挑战是，当文字内容增加时，中间的背景宽度自动拉伸。CSS3的出现实现这样的效果相对变的容易，本文使用背景图定位的知识，加上CSS其他知识。介绍CSS2实现这样效果的一种思路。
梯形背景导航
2、总体实现思路
（1）准备背景图
注意图片，一定是透明背景格式的，可以另存为下图。
透明背景图
（2）创建A标签嵌套B标签的导航菜单
<a href="javascript:void(0);" class="menu">
<b>测试</b>
</a>
（3）设置A标签的左边距，背景图从左向右显示。
A标签红色区域的背景显示出来，其他区域背景让B标签的背景将其覆盖。
A标签显示区域
（4）设置B标签的右边距，背景图从右向左显示。
B标签，通过文字的宽度让盒子变宽，同时设置B的右边距，背景图从右向左显示。
B标签显示区域
（5）说明：A标签背景图主要显示左边部分，B标签背景图主要是显示右边和中间部分，AB两个标签的背景图合并，可以显示最终理想效果。
3、细节代码实现步骤
第一步： 设置A的属性
（1）:将A标签为浮动标签，A标签的高度为25px.
（2）:将A标签的坐边距设置为25px,可以容纳背景图的弧度.
（3）:将背景图从左边定位，上下不做偏移.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>梯形导航-第一步</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.header{
width: 80%;
height: 50px;
background-color: #ccc;
overflow:hidden;
margin: 0px auto;
border: 1px solid #ccc;
}
.dhbar{
width: 70%;
margin-top: 25px;
margin-right:25px;
float: right;
background: white;
}
.dhbar a {
float: left;
cursor:pointer;
height: 25px;
padding: 0px 0px 0px 25px;
margin: 0px 10px;
font-size: 13px;
text-decoration: none;
color: black;
background:url(dh.png) no-repeat left 0px;
border: 1px solid red;
}
.dhbar b{
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="header">
<div class="dhbar">
<a href="javascript:void(0);" class="menu">
<b>测试</b>
</a>
<a href="javascript:void(0);" class="menu">
<b>多个文字测试</b>
</a>
<a href="javascript:void(0);" class="menu">
<b>测试</b>
</a>
<a href="javascript:void(0);" class="menu">
<b>测试</b>
</a>
</div>
</div>
</body>
</html>
设置A元素后的样式
第二步： 设置B的基本属性
（1）:设置B为块级元素.
（2）:设置B元素的高度
（3）:设置B元素的文字垂直居中显示,line-height与高度一样
（4）:设置B元素的右边距为25px.
.dhbar b{
border: 1px solid blue;
font-weight: normal;
display:inline-block;
height: 25px;
line-height: 25px;
z-index:1;
color: black;
padding: 0px 25px 0px 0px;
}
设置B元素后的样式
’
第三步：添加B元素背景图
.dhbar b{
border: 1px solid blue;
font-weight: normal;
display:inline-block;
height: 25px;
line-height: 25px;
z-index:1;
color: black;
padding: 0px 25px 0px 0px;
background:url(dh.png) no-repeat right 0px;
}
B元素添加背景图
第四步：去掉边框样式
最终效果
源代码 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>梯形导航</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.header{
width: 80%;
height: 50px;
background-color: #ccc;
overflow:hidden;
margin: 0px auto;
border: 1px solid #ccc;
}
.dhbar{
width: 70%;
margin-top: 25px;
margin-right:25px;
float: right;
background: white;
}
.dhbar a {
float: left;
cursor:pointer;
height: 25px;
padding: 0px 0px 0px 25px;
margin: 0px 10px;
font-size: 13px;
text-decoration: none;
color: black;
background:url(dh.png) no-repeat left 0px;
}
.dhbar b{
font-weight: normal;
display:inline-block;
height: 25px;
line-height: 25px;
z-index:1;
color: black;
padding: 0px 25px 0px 0px;
background:url(dh.png) no-repeat right 0px;
}
</style>
</head>
<body>
<div class="header">
<div class="dhbar">
<a href="javascript:void(0);" class="menu">
<b>测试</b>
</a>
<a href="javascript:void(0);" class="menu">
<b>多个文字测试</b>
</a>
<a href="javascript:void(0);" class="menu">
<b>测试</b>
</a>
<a href="javascript:void(0);" class="menu">
<b>测试</b>
</a>
</div>
</div>
</body>
</html>
4、添加鼠标移动后效果
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>梯形导航</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.header{
width: 80%;
height: 50px;
background-color: #ccc;
overflow:hidden;
margin: 0px auto;
border: 1px solid #ccc;
}
.dhbar{
width: 70%;
margin-top: 25px;
margin-right:25px;
float: right;
background: white;
}
.dhbar a {
float: left;
cursor:pointer;
height: 25px;
padding: 0px 0px 0px 25px;
margin: 0px 10px;
font-size: 13px;
text-decoration: none;
color: black;
}
.dhbar b{
font-weight: normal;
display:inline-block;
height: 25px;
line-height: 25px;
z-index:1;
color: black;
padding: 0px 25px 0px 0px;
}
.dhbar a:hover{
background:url(dh.png) no-repeat left 0px;
}
.dhbar a:hover b{
color :red;
background:url(dh.png) no-repeat right 0px;
}
</style>
</head>
<body>
<div class="header">
<div class="dhbar">
<a href="javascript:void(0);" class="menu">
<b>测试</b>
</a>
<a href="javascript:void(0);" class="menu">
<b>多个文字测试</b>
</a>
<a href="javascript:void(0);" class="menu">
<b>测试</b>
</a>
<a href="javascript:void(0);" class="menu">
<b>测试</b>
</a>
</div>
</div>
</body>
</html>
运行效果：
image.png
5、挑战实现如下效果
（1）可以用本文的思路（浏览器支持CSS3后，本文的思路基本淘汰）。
（2） 使用CSS3的新特性实现。
image.png
image.png
image.png
素材图片
dh.png
