css 绘制直角梯形 和 平行四边形

                <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);