CSS实现带箭头流程可见进度条

首先写出一个基本的样式。

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

接下来使用 :after 伪类画出一个三角形，定位到右边，如下：

.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; 
}

然后将after的颜色修改下，基本的雏形已经看到了。

.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; 
}

继续使用 :before 伪类来画出左边的三角形。如下：

.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; 
}

然后修改下before的颜色，并复制多个模块看看。

最后把开头和结尾的稍微修饰一下。

.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; 
}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

CSS做出鼠标上移图标旋转

用HTML+CSS实现下拉菜单