<!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>
实现结果：
