Clip Path

index.html

    <body>
      <header class="header"></header>
    </body>

styles.css

    .header {
      height: 10vh;
      background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.4), rgba(40, 180, 131, 0.4)),
        url('../img/pixabay_waves-g9a31aaaec_640.jpg');
      background-size: cover;
      background-position: center;

      clip-path: polygon(0 0, 100% 0, 100% 55%, 0 100%);
    }

index.html

<body>
  <section class="section_a"></section>
</body>

styles.css

.section_a {
  ...

  /* triangle: */
  clip-path: polygon(0 0, 100% 50%, 100% 50%,  0 100%); 
}

index.html

<body>
  <section class="section_b"></section>
</body>

styles.css

.section_b {
  ...

  /* triangle: */
  clip-path: polygon(50% 0, 50% 0, 100% 100%,  0 100%); 
}

index.html

<body>
  <section class="section_c"></section>
</body>

styles.css

.section_c {
  ...

  /* Right arrow */
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); 
}

index.html

<body>
  <section class="section_d"></section>
</body>

styles.css

.section_d {
  ...

    clip-path: polygon(0% 20%, 100% 0%, 100% 80%, 0% 100%);
}

Tool clippy - CSS clip-path maker