<section class="s-1">
  <div class="container">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium debitis quod numquam, natus voluptatem nostrum adipisci rerum optio dolore dolorem vero eligendi sit omnis, explicabo ipsam suscipit dolor in sequi velit perspiciatis neque. Autem facilis quas, dignissimos aut animi officia ad et perspiciatis mollitia expedita quidem beatae quam laudantium quibusdam?
  </div>
</section>
<section class="s-2">
  <div class="container">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis esse natus, accusantium officiis debitis earum suscipit voluptatem eius. Velit ullam esse et asperiores rerum excepturi corporis dolores voluptatem dignissimos ducimus!
  </div>
</section>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: #fff;
  font-family: sans-serif;
}

.container {
  margin: 0 auto;
  max-width: 576px;
  padding: 0 15px;
}

.s-1 {
  background-color: #5fc18b;
}

.s-1::after {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 15%;
  margin-top: -3%;
  background:
    linear-gradient(to bottom right, #5fc18b 50%, transparent calc(50% + 1px)) no-repeat bottom,
    linear-gradient(to bottom, #308355 10%, transparent calc(10% + 1px)) no-repeat bottom,
    linear-gradient(to bottom right, #308355 50%, transparent calc(50% + 1px)) no-repeat bottom / 100% 90%,
    linear-gradient(to top left, #44a36f 50%, transparent calc(50% + 1px)) no-repeat bottom;
}

.s-2 {
  background-color: #44a36f;
}