css实现 button 倾斜分割，tab 斜线分割，不规则渐变图形

先看效果图

• 最近有和示例图类似的需求
• 在实现的时候稍微记录了一下

主要是通过 transform 和 skew 实现的

• 通过 transform: skew(30deg) 实现效果
• 通过 transform: skew(-30deg) 还原倾斜

代码

<div class="nav-warp">
    <div class="nav">
        <div class="item">
            <div class="item-text">按钮1</div>
        </div>
        <div class="item">
            <div class="item-text">按钮2</div>
        </div>
        <div class="item">
            <div class="item-text">按钮3</div>
        </div>
    </div>
</div>

@borderRadius: 4px;
@textHeight: 40px;
@gap: 4px;
.nav-warp {
    overflow: hidden;
    border-radius: @borderRadius;

    .nav {
        display: flex;
        gap: @gap;
        width: calc(100% + @textHeight / 2);
        margin-left: (@textHeight / 4 * -1);
    }

    .item {
        flex: auto;
        background: linear-gradient(90deg, #2B64D6 0%, #9bbcff 100%);
        transform: skew(-30deg);
        border-radius: @borderRadius;

        .item-text {
            height: @textHeight;
            line-height: @textHeight;
            transform: skew(30deg);
            text-align: center;
            color: #fff;
        }
    }
}

• 编译后的 css

.nav-warp {
    overflow: hidden;
    border-radius: 4px;
}
.nav-warp .nav {
    display: flex;
    gap: 4px;
    width: calc(100% + 40px / 2);
    margin-left: -10px;
}
.nav-warp .item {
    flex: auto;
    background: linear-gradient(90deg, #2B64D6 0%, #9bbcff 100%);
    transform: skew(-30deg);
    border-radius: 4px;
}
.nav-warp .item .item-text {
    height: 40px;
    line-height: 40px;
    transform: skew(30deg);
    text-align: center;
    color: #fff;
}

最终代码