css实现带箭头的流程条

直接上效果图: 

    　　　　　　　　　　　　<ul class="navs">
        　　　　　　　　　　　　<li>1</li>
       　　　　　　　　　　　　 <li>2</li>
       　　　　　　　　　　　　 <li>3</li>
        　　　　　　　　　　　　<li>4</li>
    　　　　　　　　　　　　</ul>    

　　

			.navs {
				height: 100px;
			}
			.navs li {
				padding: 0px 10px 0 30px;
				line-height: 40px;
				background: #50abe4;
				display: inline-block;
				color: #fff;
				position: relative;
			}
			
			.navs li:after {
				content: '';
				display: block;
				border-top: 20px solid #50abe4;
				border-bottom: 20px solid #50abe4;
				border-left: 20px solid #fff;
				position: absolute;
				right: -20px;
				top: 0;
			}
			
			.navs li:after {
				content: '';
				display: block;
				border-top: 20px solid transparent;
				border-bottom: 20px solid transparent;
				border-left: 20px solid #50abe4;
				position: absolute;
				right: -20px;
				top: 0;
				z-index: 10;
			}
			
			.navs 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;
			}
			
			.navs li:first-child {
				border-radius: 4px 0 0 4px;
				padding-left: 25px;
			}
			
			.navs li:last-child,
			.cssNavEnd {
				border-radius: 0px 4px 4px 0px;
				padding-right: 25px;
			}
			
			.navs li:first-child:before {
				display: none;
			}
			
			.navs li:last-child:after,
			.cssNavEnd:after {
				display: none;
			}
			
			.navs li.active {
				background-color: #ef72b6;
			}
			
			.navs li.active:after {
				border-left-color: #ef72b6;
			}

最近有点忙,  有空的时候再分析一下实现原理  : )

　　

 

转载于:https://www.cnblogs.com/stella1024/p/8259990.html