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

css 绘制直角梯形 和 平行四边形_第1张图片

                
{{ item.label }}

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

你可能感兴趣的:(css,css3,html)