<div
:class="{
isFirst: index === 0,
tab_item: index !== 0,
}"
:style="{
width: item?.label?.length > 4 ? '206px' : '137px',
}"
>
<div>
{{ item.label }}
</div>
</div>
isFirst是直角梯形 tab_item是平行四边形
直角梯形
.isFirst
cursor pointer
width: 107px;
height: 0px;
border: 0px solid transparent
border-bottom: 42px solid $background;
border-right: 42px solid transparent
display: flex
justify-content: center
div
position: relative
top: vh(12)
left: vw(5)
平行四边形
.tab_item
cursor: pointer;
width: 137px;
height: 100%;
background-color: $background;
position: relative;
transform: skew(46deg);
display: flex
justify-content: center
align-items: center
left: vw(-15)
margin-right: vw(5)
div
transform: skew(-46deg);