用CSS实现带箭头的流程进度条

.cssNav li{ 
 padding: 0px 20px; 
 line-height: 40px; 
 background: #50abe4; 
 display: inline-block; 
 color: #fff; 
 position: relative; 
}

.cssNav li:after{ 
 content: ''; 
 display: block; 
 border-top: 20px solid red; 
 border-bottom: 20px solid red; 
 border-left: 20px solid blue; 
 position: absolute; 
 rightright: -20px; 
 top: 0; 
}

.cssNav li:after{ 
 content: ''; 
 display: block; 
 border-top: 20px solid transparent; 
 border-bottom: 20px solid transparent; 
 border-left: 20px solid #50abe4; 
 position: absolute; 
 rightright: -20px; 
 top: 0; 
 z-index: 10; 
}

.cssNav li:before{ 
 content: ''; 
 display: block; 
 border-top: 20px solid red; 
 border-bottom: 20px solid red; 
 border-left: 20px solid blue; 
 position: absolute; 
 left: 0px; 
 top: 0; 
}

.cssNav li:first-child{ 
 border-radius: 4px 0 0 4px; 
 padding-left: 25px; 
} 
.cssNav li:last-child,.cssNavEnd{ 
 border-radius: 0px 4px 4px 0px; 
 padding-right: 25px; 
} 
.cssNav li:first-child:before{ 
 display: none; 
} 
.cssNav li:last-child:after,.cssNavEnd:after{ 
 display: none; 
}

.cssNav li.active { 
 background-color: #ef72b6; 
} 
.cssNav li.active:after { 
 border-left-color: #ef72b6; 
}