SOURCE

const layerOption = {
    background: "red",
    offset: 0,
    isFirst: true,
    children: {
        background: "white",
        offset: 3,
        children: {
            background: "linear-gradient(to right, #19f4f1, #e91a74)",
            offset: 6,
            text: "首页"
        }
    }
}
let box = document.querySelector('.box')

function createDom(option) {
    let div = document.createElement('div')
    div.style.background = option.background
    div.style.setProperty('--num', option.offset + 'px')

    div.classList.add('btn2')
    div.classList.add('flex')
    div.classList.add('items-center')
    div.classList.add('justify-center')
    if (option.isFirst) {
        div.classList.add('w-fit')
        div.classList.add('h-fit')
        // div.style.minWidth = '200px'
    } else {
        div.classList.add('w-full')
        div.classList.add('h-full')
    }
    if (option.children) {
        div.appendChild(createDom(option.children))
    }
    if (option.text) {
        // div.classList.add('py-4')
        let span = document.createElement('span')
        span.textContent = option.text
        div.appendChild(span)
    }
    return div
}
box.appendChild(createDom(layerOption))

<div class="box"></div>

:root{
    --font-size:28px
}

body{
    background-color: #1c2536;
}

.w-fit{
    width: fit-content;
}
.h-fit{
    height: fit-content;
}

.w-full{
    width: 100%;
}
.h-full{
    height: 100%;
}
.flex{
    display: flex;
}
.items-center{
    align-items: center;
}
.justify-center{
    justify-content: center;
}
.py-4{
    padding-top: 8px;
    padding-bottom: 8px
}

.btn{
    clip-path: polygon(
        calc(var(--num) * 2) var(--num),
        calc(100% - var(--num) * 1.5) var(--num),
        calc(100% - var(--font-size) / 2 - var(--num)) calc(100% - var(--font-size) / 2 + 2px),
        calc(100% - var(--num) * 2) calc(100% - var(--num)),
        calc(var(--num) * 1.5) calc(100% - var(--num)),
        calc(var(--font-size) / 2 + var(--num)) calc(var(--font-size) / 2 + 2px),
        calc(var(--num) * 2) var(--num)
    );
}

.box{
    transform: skewZ(-4deg)
}

.btn2{
    width: 200px;
    height: 100px;
    clip-path: polygon(
        calc(var(--num) * 2) calc(var(--num)),
        calc(100% - 15px - var(--num)) calc(var(--num)),
        calc(100% - var(--num)) calc(15px + var(--num)),
        calc(100% - var(--num)) calc(100% - 15px - var(--num)),
        calc(100% - 15px - var(--num)) calc(100% - var(--num)),
        calc(var(--num) * 2) calc(100% - var(--num)),
        calc(15px + var(--num)) calc(100% - 15px),
        calc(15px + var(--num)) calc(15px),
        calc(var(--num) * 2) calc(var(--num))
    );
}

.btn span{
    white-space: nowrap;
    font-size: var(--font-size);
    /* color: white; */
    font-weight: bold;
}