通过纯css实现圆角的步骤流程效果，扩展性强，可以随意增加减少数量，兼容性ie6+。
具体代码：
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>css实现横向带箭头步骤流程效果
原文地址：https://www.cnblogs.com/qwguo/p/9903264.html