样式

CSS样式

.min-tab-box{
    position: relative;
    width: 100%;
    text-align: initial;
    padding-left: 550px;
    top: 10px;
}
.min-tab-item{
     position: absolute;
     --transform: perspective(75em) rotateX(0deg) rotateZ(-0deg) translate(calc(var(--x) * 87%), calc(var(--y) * 86.67%)) scale(1.145);
     transform: var(--transform);
     transition: transform .25s ease-out;
     clip-path: polygon(0% 100%,75% 100%,100% 0%,75% 0%,25% 0%);
     background: #B452CD;
     padding: 0 40px;
     color: #cccccc;
     cursor: pointer;
 }
 .min-tab-active,.min-tab-item:hover{
     transform: var(--transform) translateZ(10px) scale(1.1);
     background: #E066FF;
     color: #fff;
     font-weight: bold;
     z-index: 999;
 }

HTML

<div class="min-tab-box">
    <span class="min-tab-item" :class="dateType==='0'?'min-tab-active':''" @click="dateType='0'" :style="{'--x': 0, '--y': 0}">
        周榜
    </span>
    <span class="min-tab-item" :class="dateType==='1'?'min-tab-active':''"  @click="dateType='1'" :style="{'--x': 1, '--y': 0}">
        月榜
    </span>
    <span class="min-tab-item" :class="dateType==='2'?'min-tab-active':''"  @click="dateType='2'" :style="{'--x': 2, '--y': 0}">
        年榜
    </span>
    <span class="min-tab-item" :class="dateType==='5'?'min-tab-active':''"  @click="dateType='5'" :style="{'--x': 3, '--y': 0}">
        任意
    </span>
    <span class="min-tab-item" :class="dateType==='-1'?'min-tab-active':''"  @click="dateType='-1'" :style="{'--x': 4, '--y': 0}">
        总榜
    </span>
</div>