请问下面这种图怎么用css实现🙏

Question

已解决

Answer 1

<style>

ul{
    width:500px;background:#ccc;
    height:50px;
}
li{
    width:120px;height:30px;background:#d7d7d7;float:left;list-style:none;text-align:center;line-height:30px;
    position: relative;
}
li:nth-child(odd){
    background:#595857;
}
li:nth-child(even){
    background:#707070;
}
li:nth-child(odd)::before{
    content:'';
    display:inline-block;
    position:absolute;
    left:0;
    border-width: 15px;
    border-style: solid;
    border-color: #595857 #595857 transparent transparent  ;
}
li:nth-child(odd)::after{
    content:'';
    display:inline-block;
    position:absolute;
    right:-30px;
    border-width: 15px;
    z-index:2;
    border-style: solid;
    border-color:  transparent transparent #595857 #595857 ;
}
li:nth-child(even)::before{
    content:'';
    display:inline-block;
    position:absolute;
    left:0;
    border-width: 15px;
    border-style: solid;
    border-color: #707070 #707070 transparent transparent  ;
}
li:nth-child(even)::after{
    content:'';
    display:inline-block;
    position:absolute;
    right:-30px;
    border-width: 15px;
    z-index:2;
    border-style: solid;
    border-color:  transparent transparent #707070 #707070;
}
.active{
    background:#fff !important;
}
.active::before{
    content:'';
    display:inline-block;
    position:absolute;
    left:0;
    z-index:2;
    border-style: solid !important;
    border-color: #fff !important;
}
.active::after{
    content:'';
    display:inline-block;
    position:absolute;
    right:-30px;
    border-color: transparent transparent #fff #fff !important;
}

</style>

Answer 2

你这个是导航的切换吧