css实现横向带箭头步骤流程效果

 1 <style type="text/css">
 2 ul{margin:0px; padding:0px; list-style:none;}
 3     .wrap{width:960px; height:auto; line-height:30px; margin:100px auto 0;}
 4     .step-case{height:40px;}
 5         .step-case li{ float:left; margin:0px; width:12.5%;position:relative; cursor:pointer;}
 6         .step-case li span{display:block; background-color:#ccc;  height:40px; line-height:40px;  text-align:center; color:#fff; font-weight:bold;}
 7         .step-case b{position:absolute; font-size:0px; line-height:0px; top:0px;}
 8         .step-case .b-l{border-width:2px 2px 2px 0; border-style:dashed solid dashed dashed; border-color:transparent #ccc transparent transparent; height:36px; left:-2px;}
 9         .step-case .b-r{border-width:2px 0 2px 2px; border-style:dashed dashed dashed solid; border-color:transparent transparent transparent #ccc; height:36px; right:-2px;}
10         .step-case .b-1{border-width:20px 0 20px 20px; border-style:solid dashed solid solid; border-color:#ccc transparent #ccc #ddd; left:-20px;}
11         .step-case .b-2{border-width:20px 0 20px 20px; border-style:dashed dashed dashed solid; border-color:transparent transparent transparent #ccc; left:-21px;}
12         /*当前状态*/
13         .step-case .s-cur span{background-color:orange;}
14         .step-case .s-cur .b-l{border-right-color:orange;}
15         .step-case .s-cur .b-r{border-left-color:orange;}
16         .step-case .s-cur .b-1{border-color:orange orange orange #FABF55;}
17         .step-case .s-cur .b-2{border-left-color:#FADBA5;}
18         /*当前状态后*/
19         .step-case .s-cur-next .b-2{border-color:transparent transparent transparent orange;}
20         /*完成的状态*/
21         .step-case .s-finish span{background-color:#FADBA5; color:#000;}
22         .step-case .s-finish .b-l{border-right-color:#FADBA5;}
23         .step-case .s-finish .b-r{border-left-color:#FADBA5;}
24         .step-case .s-finish .b-1{border-color:#FADBA5 #FADBA5 #FADBA5 #FABF55;}
25         .step-case .s-finish .b-2{border-left-color:#FADBA5;}
26 </style>
27 <script type="text/javascript">
28     window.onload = function(){
29         var step = document.getElementById("step"),li = step.getElementsByTagName("li");
30         for(var i = 0;i<li.length;i++){
31             //(function(i){
32                 li[i].index = i;
33                 li[i].onclick = function(){
34                     var i = this.index;
35                     for(var j = 0;j<i;j++){
36                         li[j].className = "s-finish";
37                     }
38                     for(var j = li.length;j>i;){
39                         li[--j].className = "";
40                         if(j==i+1){
41                             li[j].className = "s-cur-next";
42                         }
43                     }
44                     this.className = "s-cur";
45                 }
46 
47             //})(i);
48         }
49     };
50 </script>
51 <div class="wrap">
52     <ul class="step-case" id="step"> 
53         <li class="s-finish"><span>第1步</span><b class="b-l"></b></li>
54         <li class="s-finish"><span>第2步</span><b class="b-1"></b><b class="b-2"></b></li>
55         <li class="s-finish"><span>第3步</span><b class="b-1"></b><b class="b-2"></b></li>
56         <li class="s-finish"><span>第4步</span><b class="b-1"></b><b class="b-2"></b></li>
57         <li class="s-cur"><span>第5步</span><b class="b-1"></b><b class="b-2"></b></li>
58         <li class="s-cur-next"><span>第6步</span><b class="b-1"></b><b class="b-2"></b></li>
59         <li><span>第7步</span><b class="b-1"></b><b class="b-2"></b></li>
60         <li><span>第8步</span><b class="b-1"></b><b class="b-2"></b><b class="b-r"></b></li> 
61     </ul>
62 </div>