目前做的一个微信内的web系统有一个页面需要用到，查了些资料实现了，分享一下。
效果如下：
燕尾型箭头.png
这个地方呢其实主要用到了css里before和after选择器，具体代码：
div.step-container {
display: flex;
overflow: hidden;
align-items: center;
}
div.step-container div.step,
div.step-container div.step2 {
background-color: #69C795;
position: relative;
display: inline-block;
flex-basis: 50px;
height: 20px;
}
div.step-container div.step:after,
div.step-container div.step2:after {
content: '';
position: absolute;
right: -10px;
background: #69C795;
width: 20px;
height: 20px;
transform: rotate(-45deg);
z-index: 1;
box-shadow: 3px 3px 0px 0px white;
}
div.step-container div.step2 {
background-color: #ccc;
}
div.step-container div.step2:after {
background: #ccc;
}
div.step-container div.step1:before {
content: '';
position: absolute;
left: -10px;
background: white;
width: 20px;
height: 20px;
transform: rotate(-45deg);
z-index: 1;
box-shadow: 3px 3px 0px 0px white;
}
html里面布局时如下即可：
<div class="step-container" style="margin-top: 25px;">
<div class="step step1"></div>
<div class="step2"></div>
<div class="step2"></div>
<div class="step2"></div>
<div class="step2"></div>
<div class="step2"></div>
</div>