title: Multiple U shapes divs
body: <p>I'm trying to obtain some nice U shapes divs.
  This is the expected result (it must look nice and be responsive):
  <a href="https://i.stack.imgur.com/GYpjQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GYpjQ.png" alt="enter image description here"></a></p>
  
  <p>This is the solution I found for footer (the shape is not so good as I want):</p>
  
  <pre><code>footer:after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 0px 0px 50% 50%;
    width: 100%;
    height: 140px;
    background-color: white; /* but if I choose a bg image for about us this solution is wrong */
    left: 0;
    top: 0px;
  }
  </code></pre>
  
  <p>I will have multiple sections similar to <code>#about-us</code>. Can you suggest a nice starting solution here? Please keep in mind in brand section background I have an animation, in footer a background image. This is why I can't use in <code>about-us</code> the solution I used for <code>footer</code>. It's kind of let's cut this div with an oval and make this section transparent.</p>
  
  <p>UPDATE:
  My current header / about us annoying merge. Adding a gray shape (inside header or in top of about us) is not a solution.
  <a href="https://i.stack.imgur.com/8WdpN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8WdpN.png" alt="enter image description here"></a></p>