<section class="slant content">
<h1>Slant Section</h1>
<p>The Content has a cool slant at the bottom!</p>
</section>
.slant {
position: relative;
}
.slant:after {
content: '';
display: block;
width: 100%;
height: 100px;
position: absolute;
left: 0px;
bottom: 0px;
background: linear-gradient(to left top, white 49.5%, transparent 50%);
}
* {
box-sizing: border-box;
}
.content {
width: 100%;
min-height: 75px;
padding: 50px 20px;
background-image: url(http://www.placekitten.com/500/600);
background-size: cover;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.