效果

1638515865(1).png

<div class="per" v-for="(item,index) in navNameList" :key="index" :class="[routeName==item.name?'acNav':'norNav','per'+index]">
              {{item.meta.title}}
          </div>

.per{
            height: 30px;
            padding: 0 20px;
            line-height: 30px;
            cursor: pointer;
            font-size: 14px;
            position: relative;
            left: -6px;
            margin: 0 3px;
        }
.acNav{
            // background-image: url('../../../assets/imgs/nav_bg2.png');
            // background-size: 100% 100%;
            // background-repeat: no-repeat;
            color: #FFCD55;
        }
        .acNav::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-image: linear-gradient(180deg, #224E70 0%, #1C7EAE 100%);
            z-index: -1;
            transform: skew(20deg);
        }
        .norNav{
            // background-image: url('../../../assets/imgs/nav_bg3.png');
            // background-size: 100% 100%;
            // background-repeat: no-repeat;
            color: #EFF5F6;
        }
        .norNav::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-image: linear-gradient(180deg, #103853 0%, #005D8B 100%);
            z-index: -1;
            transform: skew(20deg);
        }

<liclass="out">
<div></div>
</li>
.out{transform: skewX(34deg);}
div{transform: skewX(-34deg);}