目前做的一个微信内的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>