css实现流程导航效果(三种方法)

css实现流程导航效果，具体内容如下所示：

::tip 使用纯css线上 流程导航效果。    本文统一采取 flex 布局 ,你也可以采用其他布局实现，核心原理不变 :::  

## 方法一 利用裁剪  该方法IE下不支持

利用裁剪 clip-path: polygon（），直接画出一个三角 唯一一点需要算出大致百分比就可以画出来  

    
 
 
 
     .nav-box {
  display: flex;
  list-style: none;
  font-size: 14px;
     }
     .nav-box li {
  white-space: nowrap;
  color: #019fe9;
  background: #edf9ff;
  counter-increment: listCounter;
  clip-path: polygon(87% 0, 100% 50%, 87% 100%, 0 100%, 13% 50%, 0 0);
  line-height: 40px;
  padding: 0 25px;
  margin-right: -10px;
     }
     .nav-box li::before {
  content: counter(listCounter) "-";
     }
     .nav-box .active {
  color: #fcfefe;
  background: #009fe9;
     }
     .nav-box .active ~ li {
  color: #8e8e8e;
  background: #ebedf0;
     }
 
    
    
 
 

     
规则说明
     
参与活动
     
参与抽奖
     
奖品发放
     
查看结果
 
    

## 方法二 利用错位

flex + transform : skewX(); 实现  ie9+ 状况下使用前缀 -ms- + 这个方法也完全利用里before after， + 原理1 --- 利用 before + after 分成上下半区 + 原理2 --- 利用 before + after 分成左右半区

    
 
 

     .nav-box {
  display: flex;
  list-style: none;
  font-size: 14px;
     }
     .nav-box li {
  white-space: nowrap;
  color: #019fe9;
  padding: 0 15px 0 25px;
  line-height: 40px;
  margin-left: 3px;
  position: relative;
  z-index: 99;
     }
     .nav-box li:first-child{
  background: #edf9ff;
  margin-right: 7px;
     }
     .nav-box .active:first-child{
  background: #019fe9;
     }
     .nav-box li:first-child::before,
     .nav-box li:first-child::after{
  left: 7px;
     }
     .nav-box li::before,
     .nav-box li::after {
  content: "";
  position: absolute;
  left: 0;
  height: 50%;
  width: 100%;
  background: #edf9ff;
  z-index: -1;
     }
     .nav-box li::before {
  top: 0;
  transform: skew(30deg);
     }
     .nav-box li::after {
  bottom: 0;
  transform: skew(-30deg);
     }
     .nav-box .active {
  color: #d7effb;
     }
     .nav-box .active::before,
     .nav-box .active::after {
  background: #009fe9;
     }
     .active ~ li {
  color: #909091;
     }
     .active ~ li::before,
     .active ~ li::after {
  background: #ebedf0;
     }
 
    
    
 
 

     
1-规则说明
     
2-参与活动
     
3-参与抽奖
     
4-奖品发放
     
5-参与结果
 
    

## 方法三 border造三角

利用 border 生成前后三角  缺点是索引需要自己定义 不加标签情况下无法使用css计数器

  
  
  
    .nav-box{
 height:40px;
 line-height:40px;
 list-style: none;
 padding:0;
 display:flex;
 font-size:14px;
 overflow: hidden;
    }
    .nav-box li{
 padding:0 10px 0 10px;
 margin-right: 18px;
 white-space: nowrap;
 position:relative;
 color:#019fe9;
 background:#edf9ff ;
    }
    
    .nav-box li:before,.nav-box li:after{
 content:'';
 position:absolute;
 width: 0;
 height: 0;
    }
    .nav-box li:before{
 right: -16px;
 border: solid transparent;
 border-width: 20px 0 20px 16px;
 border-left-color:#edf9ff;
 z-index:2;
    }
    
    .nav-box li:after{
 top: -3px;
 left: -18px;
 border: solid #edf9ff;
 border-width: 23px 0 23px 18px;
 border-left-color: transparent;
 z-index: 1;
    }
    .nav-box .active{
 color: #fff;
 background:#009fe9;
    }
    .nav-box .active ~ li{
 color:#8e8e8e;
 background:#ebedf0;
    }
    .nav-box .active:before{
 border-left-color:#009fe9;
    }
    .nav-box .active:after{
 border-color: #009fe9;
 border-left-color: transparent;
    }
    .nav-box .active ~ li:before{
 border-left-color:#ebedf0;
    } 
    .nav-box .active ~ li:after{
 border-color: #ebedf0;
 border-left-color: transparent;
    }
  


    

 
1-规则说明
 
2-参与活动
 
3-参与抽奖
 
4-奖品发放
 
5-参与结果
    

总结

以上所述是小编给大家介绍的css实现流程导航效果(三种方法)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！