HTML
<div class="arrow">
<ul>
<li class="active" style="z-index: 3">1
<!-- <div class="left"></div>
<div class="right"></div> -->
</li>
<li style="z-index: 2">2
<!-- <div class="left"></div>
<div class="center"></div>
<div class="right"></div> -->
</li>
<li style="z-index: 1">3
</li>
</ul>
</div>
css
ul {
// overflow: hidden;
li {
position: relative;
float: left;
width: 33.33%;
height: 42px;
background-color: #CAD3D9FF;
&:not(:last-child)::before {
content: "";
position: absolute;
top: -5px;
right: -50px;
width: 0;
height: 0;
border: 26px solid #fafafa;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
}
&:not(:last-child)::after {
content: "";
position: absolute;
top: 0;
right: -40px;
width: 0;
height: 0;
border: 21px solid #CAD3D9FF;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
}
&.active {
background-color: #367699FF;
&:not(:last-child)::after {
border-left-color: #367699FF;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
}
}
}
}