Pure CSS arrow flow, search on the internet, keep the spare

inadvertently see a pure CSS to do the arrow navigation (flow), collection, for a rainy future

Actual effect

• Step One
• Step Two
• Step Three
• Step Four

Source:

Html:

<div class= "wrapper" >

<ul class= "Flow-steps" >

<li><b class= "F" ></b><a href= "#" > Step one </a><s></s></li>

<li class= "on" ><b></b><a href= "#" > Step two </a><s></s></li>

< EM id= "__mcedel" >          <li ><b></b><a href= "#" > Step three </a><s></s></li>

< EM id= "__mcedel" >          <li><b></b><a href= "#" > Step four </a><s></s></li>

</ul>

</div>

Css:

. wrapper{padding:20px;}

. flow-steps{position:relative; height:30px; list-style:none; font-size:14px; overflow:hidden;}

. flow-steps li{float:left; height:30px; margin-right:-32px; background: #d7d7d7; line-height:30px; overflow:hidden;}

. flow-steps a{Display:block; float:left; width:80px; padding:0 18px 0 0; text-align:center; color: #333; text-decoration: none;}

< EM id= "__mcedel" >  . Flow-steps b{float:left; width:0 px height:0px; margin-top:-6px; border:21px solid #d7d7d7; Border-left-color: #fff; font-size:0; line-height:0; Z-index:9;}

< EM id= "__mcedel" >  . Flow-steps s{ position:relative; Float:left; width:0px; height:0px; margin-top:-2px; BORDER:17PX solid Transparent; /*for ie6*/_border-color:snow; _filter:chroma (Color=snow);/*for ie6*/Border-left-color: #d7d7d7; font-size:0; line-height:0; z-index:99;}

< EM id= "__mcedel" >   . flow-steps. on{background: #ff6600;}

< EM id= "__mcedel" >  . flow-steps. On a{color: #fff;}

< EM id= "__mcedel" >  . Flow-steps. On b{border-color: #ff6600; Border-left-color: #fff;}

< EM id= "__mcedel" >  . Flow-steps. On s{border-left-color: #ff6600;}

. flow-steps. f{border-color: #d7d7d7!important;}

Pure CSS arrow flow, search on the internet, keep the spare