双边斜角的滑动门导航

请教一个双边斜角的滑动门导航，我已经问过很多人了，都没有解决。现在发上来寻求帮助
图片地址如果发错地方请斑竹移动下！HTML（CSS区我也发了）

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>滑动门</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
/*为什么要这样定义样式，而不用#cardBar ul 这样定义，我个人的猜测是因为类是就近原则获取样式，而#cardBar ul则不是就近原则，按标签来定义，因此.Selected样式就无法出现。*/
*{
    margin:0px;
    padding:0px;
    text-decoration:none;
}
/*定义基本样式*/
ul.cardUl{
    font-size:12px;
    list-style-type:none;
    text-align:center;
    height:29px;
    background-image:url(http://www.blueidea.com/articleimg/2006/04/3363/tabbar_level1_bk.gif);
}
/*默认样式下使用css文件*/
ul.cardUl li{
    height:29px;
    background:url(http://www.blueidea.com/articleimg/2006/04/3363/tabbar_level1_slice_left_bk.gif) left top no-repeat;
    float:left;
    margin-right:1px;
    padding-left:6px; /*为滑动门另一边提供空间*/
}
ul.cardUl li a{
    float:left;
    height:29px;
    background:url(http://www.blueidea.com/articleimg/2006/04/3363/tabbar_level1_slice_right_bk.gif) right top no-repeat;
    display:block;
    padding:8px 8px 3px 4px;/*让文字能够够居中*/
    color:#333;
    white-space: nowrap;
}
/*文字点击使用CSS*/
ul.cardUl li.Selected{
    background:url(http://www.blueidea.com/articleimg/2006/04/3363/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat;
}
ul.cardUl li.Selected a{
    background:url(http://www.blueidea.com/articleimg/2006/04/3363/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat;
}
/*对点击下栏显示边框的代码进行美化*/
div.hackBox{
    padding:2px 2px;
    border-left:2px solid #6697CD;
    border-right:2px solid #6697CD;
    border-bottom:2px solid #6697CD;
    display:none;
}
</style>
<script>
//为选项卡的默认值进行设定，方法为读取cardBar里面的li标签是否已经有selected属性，如果没有则使用默认值。
function loadTab(){
    //读取cardBar下面所有li标签
    var getId=document.getElementById("cardBar").getElementsByTagName("li");
    //定义一个判断是否有selected的变量
    var selectedItems=0;
    //判断方法，循环读出li标签的className，如果有则selectedItems加1
    for(i=0;i<getId.length;i++){
        if (getId[i].className == "Selected"){
            selectedItems+=1;
        }
    }
    //经过循环，如果selectedItems没有数值，那么说明没有selected的标签，因此给标签加上默认的className
    if (selectedItems==0){
        getId[0].className="Selected";
        document.getElementById("Dcard1").style.display="block";
    }
}
//让窗口打开就运行他
window.onload=loadTab;
//设定结束
//进行选项卡效果的触发
function switchTab(cardBar,cardId){
    //读取cardBar下面所有li标签
    var oItems = document.getElementById(cardBar).getElementsByTagName("li");
    //循环清空li标签下面的selected效果
    for (i=0;i<oItems.length;i++ ){
        var x=oItems[i];
        x.className="";
        var y=x.getElementsByTagName("a");
        y[0].style.color="#333";
    }
    //开始选项卡效果的赋值，为选中的li标签增加selected类的属性
    document.getElementById(cardId).className="Selected";
    //读出cardContent 下面的所有div标签
    var dvs=document.getElementById("cardContent").getElementsByTagName("div");
    //循环，判断应该显示的div
    for (i=0;i<dvs.length;i++ ){
        if (dvs[i].id==("D"+cardId)){
            dvs[i].style.display="block";
        }else{
            dvs[i].style.display="none";
        }
    }
}
</script>
<BODY>
<div id="aa">
    <ul class="cardUl"  id="cardBar">
        <li id="card1"><a href="#"  onmouseover="javascript:setTimeout('switchTab(\'cardBar\',\'card1\')',300);">第一选项</a></li>
        <li id="card2"><a href="#"  onmouseover="javascript:setTimeout('switchTab(\'cardBar\',\'card2\')',300);">第二选项</a></li>
        <li id="card3"><a href="#"  onmouseover="javascript:setTimeout('switchTab(\'cardBar\',\'card3\')',300);">第三选项</a></li>
        <li id="card4"><a href="#"  onmouseover="javascript:setTimeout('switchTab(\'cardBar\',\'card4\')',300);">第四选项</a></li>
    </ul>
    <div id="cardContent">
        <div id="Dcard1" class="hackBox"></div>
        <div id="Dcard2" class="hackBox"></div>
        <div id="Dcard3" class="hackBox">代码三</div>
        <div id="Dcard4" class="hackBox">代码四</div>
    </div>
</div>
</BODY>
</HTML>
http://bbs.blueidea.com/thread-2716625-1-1.html  这里有个例子或者搜索下不规则选项卡
参见：http://www.doyoe.com/model/tabstrip/tabstrip4/5.htm
这就纯css就能实现
a:hover{background:(蓝色图片的地址) no-repeat}