原来你是这样的导航条--一个不规则导航条的实现思路

项目中有一个需求是制作不规则导航条，主要用于对当前用户操作进度的提示。设计如图：

由于工期紧开始计划不规则图形部分用图片解决，但仔细一想，其实用css的方法也是可以解决的，解决办法如下：

简单分析一下这个导航条的结构和实现难点：

1. 导航条两端圆角
2. 每一个项目之间都由不规则箭头分割，『active状态』的蓝色背景也是一个不规则的图形。

1.先把导航条的基本结构实现。

html：


   

     
购物车
     
确认订单信息
     
成功提交订单
     
商品评论
    
 

----------

less：

      @color_base:#1787e9; //蓝色
      @color_gray2:#767676; //灰色
.step{
     width: 600px;   
     ul{
  margin: 4px 0px;
  height: 30px;
  line-height: 30px;
  li{
      float: left;
      width: 150px;
      color: #fff;
      text-align: center;
      font-size: 12px;
      background-color: @color_gray2;
      &.active{
   background-color: @color_base;
      }   
  }
     }
 }

效果如图：

1. 实现分割
   做这里的时候在群里收集了一下大家的方法。这里简单说几个思路，以及我的解决办法：
   1）思路一：拼接三角形，css实现两个三角形的堆叠，用不一样的三角形拼出箭头形状。
   我们通过给li元素增加样式：

   width: 140px;
   margin: 0px 5px;

   使li之间多出10px的缝隙，然后给ul加一个灰色背景（#ccc），效果如图：
   
   然后添加三角形，效果如图：（两个小三角形首尾相连）
   
   其实还有其他组合方式，比如这种：（三角形上下堆叠，父元素overflow:hidden）
   

2) 思路二：利用:before和:after伪类实现三角形，好处是不用增加其他元素。算是思路一的变体。
代码如下： 效果图：

3）思路三：我的方法，解决思路是利用:before和图标字体（Font Awesome）。

在基本结构的基础上给li的:before应用图标字体：

li{
      position: relative;
      float: left;
      width: 150px;
      color: #fff;
      text-align: center;
      font-size: 12px;
      background-color: @color_gray2;
      &:before{
   position: absolute;
   right: -19px;
   z-index: 20;
   font-size: 50px;
   font-family: 'FontAwesome';
   content: "f054";
   line-height: 35px;
   color:@color_gray3;
      }
      &.active{
   background-color: @color_base;
      }
      &:last-child:before{
   display: none;
      }
  }

效果图如下：

之后就是给ul设置圆角并且设置超出隐藏

border-radius: 15px;
overflow: hidden;

效果如图：

根据这个思路我们可以对分割进行其他样式的变化比如：（举个栗子）

完整代码如下

html：


   

     
购物车
     
确认订单信息
     
成功提交订单
     
商品评论
    
 

----------

less：

      @color_base:#1787e9; //蓝色
      @color_gray2:#767676; //灰色
.step{
     width: 600px;   
     ul{
  margin: 4px 0px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  overflow: hidden;
  li{
      position: relative;
      float: left;
      width: 150px;
      color: #fff;
      text-align: center;
      font-size: 12px;
      background-color: @color_gray2;
      &:before{
   position: absolute;
   right: -19px;
   z-index: 20;
   font-size: 50px;
   font-family: 'FontAwesome';
   content: "f054";
   line-height: 35px;
   color:@color_gray3;
      }
      &.active{
   background-color: @color_base;
      }
      &:last-child:before{
   display: none;
      }
  }
     }
 }

这篇手记仓促完成，感谢群里的小伙伴们的帮助。如果大家还有别的方法，期待告知！谢啦!!(*＾-゜)v