<div class="block">
    <div class="block__inner">
        <p class="block__text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore veritatis iure tenetur sapiente, voluptatum repudiandae reprehenderit incidunt, cumque accusantium perspiciatis rem officia obcaecati illo id ducimus quas dolorem et debitis?</p>
    </div>
</div>
<div class="block">
    <div class="block__inner">
        <p class="block__text">Sapiente voluptate eum ipsum tempora nostrum, nobis accusantium nesciunt esse vitae dolor! Explicabo minus alias autem provident modi debitis cumque exercitationem, architecto, eum labore atque amet, omnis fugiat delectus. Sint!</p>
    </div>
</div>
<div class="block">
    <div class="block__inner">
        <p class="block__text">Quae pariatur doloremque labore aliquam at est animi eius placeat, sed vero perspiciatis alias! Ad a eveniet iusto excepturi provident odit molestias deserunt culpa, magnam laboriosam sit ea doloribus magni!</p>
    </div>
</div>

body {
    min-height: 100vh;
    margin: 0;
    gap: 32px;
    padding: 64px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
}

.block {
    --gap: 2px;
    --padding: 20px;
    --divider: 1.8;
    --header-marker-width: 120px;
    --header-marker-height: 20px;
    --header-marker-skew: 20px;

    line-height: 1.5;
    background-color: #222222;
    color: #ffffff;
    clip-path: polygon(
        0% 0%,
        var(--header-marker-width) 0%,
        calc(var(--header-marker-width) + var(--header-marker-skew)) var(--header-marker-height),
        100% var(--header-marker-height),
        100% 100%,
        0% 100%
    );
}

.block__inner {
    width: 100%;
    height: 100%;
    padding: calc(var(--header-marker-height) + var(--padding) + var(--gap)) calc( var(--padding) + var(--gap)) calc( var(--padding) + var(--gap)) calc( var(--padding) + var(--gap));
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.1);
    clip-path: polygon(
        calc(0% + var(--gap)) calc(0% + var(--gap)),
        calc(var(--header-marker-width) - var(--gap) / var(--divider)) calc(0% + var(--gap)),
        calc(var(--header-marker-width) + var(--header-marker-skew) - var(--gap) / var(--divider)) calc(var(--header-marker-height) + var(--gap)),
        calc(100% - var(--gap)) calc(var(--header-marker-height) + var(--gap)),
        calc(100% - var(--gap)) calc(100% - var(--gap)),
        calc(0% + var(--gap)) calc(100% - var(--gap))
    );
}

.block__text {
    margin: 0;
}

const blocks = document.querySelectorAll('.block');

const update = (property) => (value) => blocks.forEach((block) => {
    const unit = property === '--divider' ? value : CSS.px(value);
    block.style.setProperty(property, unit);
});

const gui = new dat.GUI();

const params = {
    gap: 2,
    padding: 20,
    divider: 1.8,
    markerWidth: 120,
    markerHeight: 20,
    markerSkew: 20
};

const border = gui.addFolder('Border');
border
    .add(params, 'gap', 0, 20, 1)
    .onChange(update('--gap'));
border
    .add(params, 'padding', 0, 100, 1)
    .onChange(update('--padding'));
border
    .add(params, 'divider', 1, Math.PI)
    .onChange(update('--divider'));
border.open();

const marker = gui.addFolder('Marker');
marker
    .add(params, 'markerWidth', 0, 320, 1)
    .onChange(update('--header-marker-width'));
marker
    .add(params, 'markerHeight', 0, 100, 1)
    .onChange(update('--header-marker-height'));
marker
    .add(params, 'markerSkew', 0, 60, 1)
    .onChange(update('--header-marker-skew'));
marker.open();