目前做的一個微信內(nèi)的web系統(tǒng)有一個頁面需要用到，查了些資料實現(xiàn)了，分享一下。

效果如下：

燕尾型箭頭.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>