div+css 伪类制作个横向步骤箭头标签

html部分

<div class="step-col">
        <span>第一步</span>
        <span>第二步</span>
        <span>第三步</span>
        <span>第四步</span>
        <span>第五步</span>
</div>

css部分

           .step-col {
                span {
                    color: #000;
                    height: vh(28);
                    width: vw(85);
                    line-height: vh(28);
                    @include font-size(16);
                    margin: 0 2px;
                    position: relative;
                }
                :nth-child(5)::before,
                :nth-child(4)::before,
                :nth-child(3)::before,
                :nth-child(2)::before,
                :nth-child(1)::before {
                    content: '';
                    width: 0;
                    height: 0;
                    border-top: vh(14) solid transparent;
                    border-bottom: vh(14) solid transparent;
                    border-left: vh(12) solid rgba(9, 38, 68, 1);
                    position: absolute;
                    left: 0;
                }
                :nth-child(5)::after,
                :nth-child(4)::after,
                :nth-child(3)::after,
                :nth-child(2)::after,
                :nth-child(1)::after {
                    content: '';
                    width: 0;
                    height: 0;
                    border-top: vh(14) solid transparent;
                    border-bottom: vh(14) solid transparent;
                    border-left: vh(12) solid #a6f5fc;
                    position: absolute;
                    right: -15%;
                    z-index: 2;
                }
                :nth-child(2)::after {
                    border-left: vh(12) solid #62edfa;
                }
                :nth-child(3)::after {
                    border-left: vh(12) solid #01bafe;
                }
                :nth-child(4)::after {
                    border-left: vh(12) solid #3588f5;
                }
                :nth-child(5)::after {
                    border-left: vh(12) solid #004edd;
                }
                :nth-child(1) {
                    background-color: #a6f5fc;
                }
                :nth-child(2) {
                    background-color: #62edfa;
                }
                :nth-child(3) {
                    background-color: #01bafe;
                }
                :nth-child(4) {
                    background-color: #3588f5;
                }
                :nth-child(5) {
                    background-color: #004edd;
                }
            }

效果

image.png