css如何弄导航,css如何实现流程导航效果？有哪几种方法？

方法一：利用裁剪(该方法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;

}

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

(相关教程推荐：CSS入门教程)

方法二：利用错位

.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. 1-规则说明
2. 2-参与活动
3. 3-参与抽奖
4. 4-奖品发放
5. 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. 1-规则说明
2. 2-参与活动
3. 3-参与抽奖
4. 4-奖品发放
5. 5-参与结果

更多编程相关教程，请关注php中文网编程入门栏目！