<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.