Flow-Steps 导航效果常用于需要表示执行步骤的交互页面，效果图如下：
通常使用图片来实现 Flow-Steps 效果，但此方法的灵活性不足，当内容变化较大时就可能需要重新切图，这里介绍使用纯 CSS 的方法来实现 Flow-Steps 效果：
兼容版本
此版本兼容主流的浏览器（IE6、7、8… FF、chrome），但也因此导致 HTML 结构比较复杂，并且使用了 IE 的滤镜，先看下 Demo：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS flow-steps/crumbs</title>
<style type="text/css">
*{ margin:0; padding:0;}
.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;}
.flow-steps b{ float:left; width:0px; height:0px; margin-top:-6px; border:21px solid #d7d7d7; border-left-color:#fff; font-size:0; line-height:0; z-index:9;}
.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;}
.flow-steps .on{ background:#ff6600;}
.flow-steps .on a{ color:#fff;}
.flow-steps .on b{ border-color:#ff6600; border-left-color:#fff; }
.flow-steps .on s{ border-left-color:#ff6600;}
.flow-steps .f{ border-color:#d7d7d7!important;}
</style>
</head>
<body>
<div class="wrapper">
<ul class="flow-steps">
<li><b class="f"></b><a href="#">步骤一</a><s></s></li>
<li class="on"><b></b><a href="#">步骤二</a><s></s></li>
<li><b></b><a href="#">步骤三</a><s></s></li>
<li><b></b><a href="#">iinterest.net</a><s></s></li>
</ul>
</div>
</body>
</html>
两点必要的说明：
- 三角箭头效果是用 border 实现的，具体的实现方法可以看CSS icon 拼装指南中[边框]那一节
- 因 IE6 下不支持 border-color:transparent，解决方法是先将其设置为一个不常用的颜色，然后再用IE的滤镜将其透明化（Demo 中有注释）
CSS3 版本
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS flow-steps/crumbs</title>
<style type="text/css">
*{ margin:0; padding:0;}
.wrapper{ padding:20px;}
.flow-steps{ position:relative; height:30px; list-style:none; font-size:14px; overflow:hidden;}
.flow-steps li{ float:left; margin-right:-28px;}
.flow-steps a{ display:block; float:left; width:170px; min-width:150px; height:30px; background:#d7d7d7; color:#333; line-height:30px; text-align:center; text-decoration:none;}
.flow-steps a:before{ content:""; display:block; float:left; width:0; height:0px; margin-top:-6px; border:21px solid transparent; border-left-color:#fff;}
.flow-steps a:after{ content:""; position:relative; display:block; float:right; width:0; height:0px; margin:0 -1px 0 10px; border:15px solid transparent; border-left-color:#d7d7d7;}
.flow-steps li:first-child a:before{ border:12px solid #d7d7d7;}
.flow-steps li:last-child a:after{ border:8px solid #d7d7d7; margin-right:0;}
.flow-steps .on a{ background:#ff6600; color:#fff;}
.flow-steps .on a:after{ border-left-color:#ff6600;}
.flow-steps li.on:first-child a:before{ border-color:#ff6600;}
.flow-steps li:hover a{ background:#ff6600; color:#fff;}
.flow-steps li:hover a:after{ border-left-color:#ff6600;}
.flow-steps li:first-child:hover a:before{ border-color:#ff6600;}
.flow-steps li:last-child:hover a:after{ border-color:#ff6600;}
</style>
</head>
<body>
<div class="wrapper">
<ul class="flow-steps">
<li><a href="#">步骤一</a></li>
<li><a href="#">步骤二</a></li>
<li class="on"><a href="#">步骤三</a></li>
<li><a href="#">iinterest.net</a></li>
</ul>
<div class="arr"></div>
</div>
</body>
</html>
