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;
}
}
效果