效果图如下
html部分只需要一个ul列表即可(进度条首尾根据自身需求去做修改)
css样式部分代码
第一步:生成一个长方形效果
第二步:根据:after在长方形后面生成一个三角形
第三步:修改后面三角形颜色
第四步:通过:before在长方形前面生成三角形并做位置颜色处理
此时已基本完成效果图;
之后就是根据状态去做判断当前颜色改变(下图后三个样式为添加active样式,第一个样式为对第一个元素前面的三角做隐藏处理,最后一个元素的三角也可以根据需求做相应的处理)
最终效果图