css实现箭头矩形流程效果 

<!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> 

实现结果：

 

posted @ 2017-03-31 15:41  灵哆哆  阅读(2518)  评论(0)    收藏  举报