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.