<section class="spikes">
  <div class="content">
    <h1>Lorem ipsum</h1>
    <p>Quisque vitae feugiat nunc. Aenean rutrum iaculis lectus. Quisque lectus est, tristique vitae feugiat vitae, dapibus quis lacus.</p>
  </div>
</section>

<section class="content white">
  <h2>Morbi et gravida leo</h2>
  <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi id feugiat ex, ultricies volutpat diam.</p>
</section>

.spikes {
  position: relative;
  background: #0bd;
}

.spikes::after {
  content: '';
  position: absolute;
  right: 0;
  left: -0%;
  top: 100%;
  z-index: 10;
  display: block;
  height: 80px;
  background-size: 80px 100%;
  background-image: linear-gradient(135deg, #0bd 25%, transparent 25%), linear-gradient(225deg, #0bd 25%, transparent 25%);
  background-position: 0 0;
}

.content {
  padding: 2rem;
}
.white {
  margin-top: 2rem;
}
h1, h2 {
  font-family: 'Lobster Two', cursive;
}