<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.clearfix{clear:both;}
ul{list-style:none;}
li{float:left;width:215px;height:30px;position:relative;list-style:none;margin-left:-12px;}
.less{ border-style:dashed dashed dashed solid; border-color:transparent transparent transparent orange; border-width:15px 0 15px 15px;top:0;} /*dashed 设置透明*/
.less1{ border-style:dashed dashed dashed solid; border-color:transparent transparent transparent #fff; border-width:15px 0 15px 15px;top:0;}
.right{right:0;}
.left{left:0;}
samp{ display:block;position:absolute;z-index:2;}
span{ display:block;position:relative;float:left;z-index:3;}
.block{ width:200px; height:30px; line-height:30px; text-align:center; background:orange; vertical-align:middle;color:#fff;float:left;z-index:1;}
</style>
</head>
<body>
<ul>
<li>
<div class="block">第1步</div>
<span class="less"></span>
</li>
<li>
<samp class="less1 left"></samp>
<div class="block">第2步</div>
<span class="less right"></span>
</li>
<li>
<samp class="less1 left"></samp>
<div class="block">第3步</div>
<span class="less"></span>
</li>
<li>
<samp class="less1 left"></samp>
<div class="block">第4步</div>
<span class="less"></span>
</li>
<li>
<samp class="less1 left"></samp>
<div class="block">第5步</div>
</li>
<div class="clearfix"></div>
</ul>
</body>
</html>
实现结果：
