title: Draw double curved item with beveled edges
body: <p>I'm creating a website, with a header / menu on top. 
  In the middle, there is a logo. To accentuate this, I've absolute positioned an ellips below the logo: So underneath, you see the ellips, which blends in perfectly with the rest of the menu. </p>
  
  <pre><code>.ellips {
          border-radius: 50%;
          height: 130%;
          background: white;
          left: 0px;
          right: 0px;
          z-index: 1;
          position: absolute;
          top: 6%;
          border: 2px solid #dfe0e4;
      }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/jwxdc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jwxdc.png" alt="Absolutely positioned ellips"></a></p>
  
  <p>Now the client wants to see the left and right 'corner' also curved:</p>
  
  <p><a href="https://i.stack.imgur.com/gGwEH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gGwEH.png" alt="enter image description here"></a></p>
  
  <p>I know that the 'shove an ellips beneath the menu' approach won't suffice.
  I was thinking about 2 possible solutions:</p>
  
  <ol>
  <li><p>Create an SVG with the curve, and place it beneath the menu. I've tried that solution, but I'm no SVG expert, so I went to try a CSS approach:</p></li>
  <li><p>Try to create CSS item (div) with such curve: above it's white, below it's transparent. Put dat item below the menu. </p></li>
  </ol>
  
  <p>I prefer a css solution, as I'm no big hero in SVG. But if it can be achieved much easier with SVG. Then I'd take that solution off course.</p>
  
  <p>Edit: The blue-ish background you see, is an underlaying image. So this needs to be transparant. </p>
  
  <p>The ellips needs to be colored white.</p>
  
  <p><a href="https://i.stack.imgur.com/Z0PBc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z0PBc.png" alt="enter image description here"></a></p>