SOURCE

<div class="process">
    <div class="process-item">
        <span>第1个</span>
        <div class="arrow"></div>
    </div>
    <div class="process-item">
        <span>第2个</span>
        <div class="arrow"></div>
    </div>
    <div class="process-item">
        <span>第3个</span>
        <div class="arrow"></div>
    </div>
    <div class="process-item">
        <span>第4个</span>
        <div class="arrow"></div>
    </div>
</div>

body {
    background: #fff;
}

* {
    margin: 0;
    padding: 0;
}

.process-item {
    display: inline-block;
    /* 这里的左边距 右边距 - （左三角的宽度 + 右三角的左偏移量） */
    padding: 8px 34px 8px 14px;
    background: #666;
    position: relative;
    white-space: nowrap;
    color: rgba(0, 0, 0, 0.65);
    font-size: 12px;
}

.process-item:last-child .arrow::after {
    border-color: transparent;
}

.arrow {
    /* 边框的两倍 */
  width: 32px;
  height: 32px;
  background: #fff;
  position: absolute;
  right: -16px;
  top: 0;
}

.arrow::before,
.arrow::after {
    content: ' ';
    position: absolute;
    border: 16px solid #fff;
    top: 0;
}

.arrow::before {
    left: 0;
    border-color: transparent;
    border-left-color: #666;
}

.arrow::after {
    left: 4px;
    border-color: #666;
    border-left-color: transparent;
}