Html
    Css
    Js

    
                        
ul {
	margin:0px;
	padding:0px;
	list-style:none;
}
.wrap {
	width:960px;
	height:auto;
	line-height:30px;
	margin:100px auto 0;
}
.step-case {
	height:40px;
}
.step-case li {
	float:left;
	margin:0px;
	width:12.5%;
	position:relative;
	cursor:pointer;
}
.step-case li span {
	display:block;
	background-color:#ccc;
	height:40px;
	line-height:40px;
	text-align:center;
	color:#fff;
	font-weight:bold;
}
.step-case b {
	position:absolute;
	font-size:0px;
	line-height:0px;
	top:0px;
}
.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;
}
.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;
}
.step-case .b-1 {
	border-width:20px 0 20px 20px;
	border-style:solid dashed solid solid;
	border-color:#ccc transparent #ccc #ddd;
	left:-20px;
}
.step-case .b-2 {
	border-width:20px 0 20px 20px;
	border-style:dashed dashed dashed solid;
	border-color:transparent transparent transparent #ccc;
	left:-21px;
}
/*当前状态*/
		.step-case .s-cur span {
	background-color:orange;
}
.step-case .s-cur .b-l {
	border-right-color:orange;
}
.step-case .s-cur .b-r {
	border-left-color:orange;
}
.step-case .s-cur .b-1 {
	border-color:orange orange orange #FABF55;
}
.step-case .s-cur .b-2 {
	border-left-color:#FADBA5;
}
/*当前状态后*/
		.step-case .s-cur-next .b-2 {
	border-color:transparent transparent transparent orange;
}
/*完成的状态*/
		.step-case .s-finish span {
	background-color:#FADBA5;
	color:#000;
}
.step-case .s-finish .b-l {
	border-right-color:#FADBA5;
}
.step-case .s-finish .b-r {
	border-left-color:#FADBA5;
}
.step-case .s-finish .b-1 {
	border-color:#FADBA5 #FADBA5 #FADBA5 #FABF55;
}
.step-case .s-finish .b-2 {
	border-left-color:#FADBA5;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css实现的步骤流程

2
      duhc0
      2017/6/22 15:12:01

      很不错 ,lz厉害

      回复
      南城北忆0
      2017/6/21 12:04:01

      很好 很值得学习

      回复