SOURCE

let layerOption = [
    {
        background: "skyblue",
        clipPath: `polygon(
            0 0,
            30px 0,
            20px 5px,
            100% 5px,
            100% calc(100% - 6px),
            calc(100% - 40px) 100%,
            calc(100% - 33px) calc(100% - 6px),
            20px calc(100% - 6px),
            0 calc(100% - 6px - 6px),
            0 0)`,
        position: {
            left: '0px',
            top: "0px",
        },
    },
    {
        background: "#e31e77",
        clipPath: `polygon(
            0 0,
            30px 0,
            20px 5px,
            100% 5px,
            100% calc(100% - 6px),
            calc(100% - 40px) 100%,
            calc(100% - 33px) calc(100% - 6px),
            20px calc(100% - 6px),
            0 calc(100% - 6px - 6px),
            0 0)`,
        position: {
            left: '14px',
            top: "14px",
        },
    },
]
let box = document.querySelector('.box')
function initBox() {
    layerOption.forEach((item,index) => {
        let div = document.createElement('div')
        div.classList.add('btn')
        div.style.setProperty('--bg-color', item.background);
        div.style.setProperty('--path', item.clipPath);
        div.style.setProperty('--left', item.position.left);
        div.style.setProperty('--top', item.position.top);
        div.style.setProperty('--z-index', index);
        box.appendChild(div)
    })
}
initBox()

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

.box{
    width: 200px;
    height: 100px;
    border: 1px solid red;
    position: relative;
}
.btn{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: var(--bg-color);
    clip-path: var(--path);
    left: var(--left);
    top: var(--top);
}