<!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> 实现结果：
转载于:https://www.cnblogs.com/janney/p/6651678.html
相关资源：HTML网页画箭头
