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