The approach

It’s normal for websites to have section dividers to break up a page, but why stick with horizontal dividers? The approach is to have a consist skew that is responsive with minimal markup, using the CSS background attribute rather than background-color, so that an image or gradient can be used as easily as a solid colour.

Skewing the divider

The divider is responsive and can be tweaked via the scoped CSS variables.

<section class="section skewed">
    <h1>Section title</h1>
    <p>section content</p>
</section>

The CSS

.section-skewed {
    --bg-color: linear-gradient(45deg, #7a4bc0, #4bb1c0, #9f4bc0);
    --txt-color: white;
    --angle: -2.5deg;
    display: block;
    color: var(--txt-color);
    position: relative;
    padding: 5rem 1rem;
    margin: 3rem 0;
    text-align: center;
    isolation: isolate;
}
.section-skewed::before {
    content: '';
    background: var(--bg-color);
    display: inline-block;
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: skewY(var(--angle));
}
.section-skewed h1 {
    font-size: 2rem;
    text-transform: capitalize;
}