帶三角形的進度條

實現效果如上，

<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僞類 製做三角形以及白色的分隔線