CSS Rotated Bottom Border Thing

This technique allows you to create a background to a div that looks as if it is rotated.

See the Pen rotated bottom border thing by Noah (@noahbass) on CodePen.

The stlying for this component is built underneath the content. So add your content first:

<section class="component">
    <div class="component__content">
        <h1>Egestas Ligula Nullam</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Repudiandae ad velit tempore odit, facilis modi. Dolore sapiente,
        dolores vero omnis nesciunt tempora enim iste,
        veniam asperiores fugit consequatur minima, a.</p>
    </div>
</section>

From here you can concentrate on styling the content itself before worrying about the fancy rotated border. Here is some sass styling to get started:

.component {
    padding: 4rem 1rem;
    margin-bottom: 2rem;

    .component__content {
        max-width: 1000px;
        margin: 0 auto;
        padding-left: 10px;
        padding-right: 10px;
        color: #fff;
    }
}

Now onto the rotated bottom border part. It is built from the css ::before psuedo selector. So set that up first with a background color to start:

.component {
    ...

    &::before {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: green;
    }

    .component__content {
        ...
    }
}

Concentrating on the &::before part of the sass, you’ll notice that the background color overlays the content. Easy fix:

// 1. places background below content
&::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1; // [1]
    background-color: green;
}

Now to get the component flush to the top and left:

&::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    top: 0;
    left: 0;
    background-color: green;
}

Finally, the transforms that rotate the background.

&::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    top: 0;
    left: 0;
    transform-origin: 0 100%;
    transform: rotate(-2deg) translateZ(0);
    background-color: green;
}

All you need to do is apply vendor prefixes and your good to go.