带三角形的进度条

实现效果如上，

<div class="topstep topstepNormal">
		<div class="step step1 active">表头读数</div>
		<div class="step step2 ">阀门控制</div>
		<div class="step step3">通信模块</div>
</div>

.topstep .step{background:#6fd9e0;float:left;color:#fff;position:relative;}
.topstep .step1{width:calc(100%/3 - 10px);padding:12px 10px;z-index:120;}
.topstep .step2{width:33.333333%;padding:12px 0px 12px 35px;z-index:90;}
.topstep .step3{width:calc(100%/3 + 10px);padding:12px 0px 12px 35px;}
.topstep .step:after{content:"";width:0;height:0;top:0;right:-50px;position:absolute;border:25px solid transparent;border-color:transparent transparent transparent #6fd9e0;}
.topstep .step:before{content:"";width:35px;height:35px;position:absolute;right:-19px;top:50%;transform:translate(0 ,-50%) rotate(45deg);border-top:2px solid #fff;border-right:2px solid #fff;}

.topstep .step.active{background:#ADDE17;}
.topstep .step.active:after{border-color:transparent transparent transparent #ADDE17;}

主要用到几个主要知识点

（1）calc(exp)表达式

（2）before 和 after伪类 制做三角形以及白色的分隔线