斜角梯形 tab 标签页 css写法 及 vue写法

1.纯 css js 写法：

image.png

原文链接：https://blog.csdn.net/p_pppxxxxmmm/article/details/106764545

---

---

2.vue写法

根据上面的稍加改动

image.png

    
    

           
邀请助力赢大奖
          
邀请报名赢大奖
     
     
      

           

                 

                    
邀请好友赢大奖，最高 XXX 奖品
                 
           
           

                  
           
      
 


methods:{
    clickTab(tab) {
          this.tab = tab
    },
}

            //  style
            .tabChange{
                width: 100%;
                @include position(absolute, 10, 580px, static, static, static);
                @include flex(column, center, center);
                .nav{
                    display: flex;
                    width: 70%;
                    align-items: flex-end;
                    .item{
                        flex: 0.8;
                        height: 55px;
                        background: orange;
                        border-radius: 5px 5px 0 0;
                        position: relative;
                        list-style: none;
                        margin: 0 15px;
                        display: flex;
                        // text-align: center;
                        // vertical-align: middle;
                        justify-content: center;
                        align-items: center;
                    }
                    .item:before{
                        content: '';
                        display: block;
                        width: 26px;
                        height: 101%;
                        background: orange;
                        position: absolute;
                        right: -13px;
                        top: 0;
                        z-index: -1;
                        border-radius: 0 5px 0 0;
                        transform: skew(20deg);
                    }
                    .item:after{
                        content: '';
                        display: block;
                        width: 26px;
                        height: 101%;
                        background: orange;
                        position: absolute;
                        left: -13px;
                        top: 0;
                        z-index: -1;
                        border-radius: 5px 0 0 0;
                        transform: skew(-20deg);
                    }


                    .active{
                        flex: 1;
                        height: 70px;
                        background: #eee;
                        z-index: 10;
                        transform: translateY(1px);
                    }

                    .active:after{
                        content: '';
                        display: block;
                        width: 26px;
                        height: 101%;
                        background: #eee;
                        position: absolute;
                        left: -13px;
                        top: 0;
                        z-index: 10;
                        border-radius: 5px 0 0 0;
                        transform: skew(-20deg);
                    }
                    .active::before{
                        content: '';
                        display: block;
                        width: 26px;
                        height: 101%;
                        background: #eee;
                        position: absolute;
                        right: -13px;
                        top: 0;
                        z-index: 10;
                        border-radius: 0 5px 0 0;
                        transform: skew(20deg);
                    }
                }

              .tab-show{
                    background-color: #eee;
                    border-radius: 16px;
                    width: 90%;
                    height: 800px;
                    padding: 70px;
              }