css样式制作步骤流程进度条

效果图如下

html部分只需要一个ul列表即可（进度条首尾根据自身需求去做修改）

 

css样式部分代码

第一步：生成一个长方形效果

第二步：根据：after在长方形后面生成一个三角形

 

第三步：修改后面三角形颜色

 

第四步：通过：before在长方形前面生成三角形并做位置颜色处理

 

此时已基本完成效果图；

之后就是根据状态去做判断当前颜色改变（下图后三个样式为添加active样式，第一个样式为对第一个元素前面的三角做隐藏处理，最后一个元素的三角也可以根据需求做相应的处理）

最终效果图