带箭头的面包屑导航栏

html

<ul class="cssNav">
        <li >填写信息</li>
        <li >提交申请</li>
        <li class="active">等待审核</li>
        <li >完成</li>
	</ul>	

css

.cssNav li{  
		    padding: 0px 45px;   
		    line-height: 40px;  
		    background: #50abe4;  
		    display: inline-block;   
		    color: #fff;  
		    position: relative;  
		}
		.cssNav li:after{  
		    content: '';  
		    display: block;  
		    border-top: 20px solid transparent;  
		    border-bottom: 20px solid transparent;  
		    border-left: 20px solid #50abe4;  
		    position: absolute;   
		    right: -19px;   
		    top: 0;  
		    z-index: 10;  
		} 
		.cssNav li:before{  
		    content: '';  
		    display: block;  
		    border-top: 20px solid #50abe4;  
		    border-bottom: 20px solid #50abe4;  
		    border-left: 20px solid #fff;  
		    position: absolute;   
		    left: 0px;   
		    top: 0;  
		}
		.cssNav li:first-child{    
		     border-radius: 4px 0 0 4px;      
		    padding-left: 46px;  
		}   
		.cssNav li:last-child{    
		    border-radius: 0px 4px 4px 0px;    
		    padding-right: 25px;   
		}    
		.cssNav li:first-child:before{    
		    display: none;    
		}
		/*.cssNav li:last-child:after{    
		    display: none;    
		}*/
		/*选中后的样式*/
		.cssNav li.active {  
		    background-color: #ef72b6;  
		}  
		.cssNav li.active:after {  
		    border-left-color: #ef72b6;  
		}
		.cssNav li.active:before {  
		    border-top-color: #ef72b6;
		    border-bottom-color: #ef72b6;  
		} 

效果