html - Draw double curved item with beveled edges

Question

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.

.ellips {
        border-radius: 50%;
        height: 130%;
        background: white;
        left: 0px;
        right: 0px;
        z-index: 1;
        position: absolute;
        top: 6%;
        border: 2px solid #dfe0e4;
    }

Now the client wants to see the left and right 'corner' also curved:

I know that the 'shove an ellips beneath the menu' approach won't suffice. I was thinking about 2 possible solutions:

1. 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:

2. Try to create CSS item (div) with such curve: above it's white, below it's transparent. Put dat item below the menu.

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.

Edit: The blue-ish background you see, is an underlaying image. So this needs to be transparant.

The ellips needs to be colored white.

Answer 1

I created 2 SVG examples so you can choose where to apply the background

Codepen demo

---

The outer container of each SVG element keeps a specific aspect ratio so the whole element can be responsive (but, of course, you can also specify a fixed width or height).

The basic idea is to create a path that overflows the size of the SVG element, so you can define a closed shape on the top area or on the bottom area, in order to fill it with a colour (if you enlarged the viewbox e.g. to -10 -10 610 130 you could see how the path is actually defined).

The applied background is a gradient but you can also specify a single color-stop (white, in your specific scenario). The background on the body element shows the transparent parts of the SVG.

Fine tuning and adjustment of curves, viewbox, colours is left to the reader.

For any change to the shape you can read the path documentation on MDN

Markup

<div class="doublecurve">
  <svg viewBox="0 0 600 120" xmlns="http://www.w3.org/2000/svg">

    <defs>
      <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%"   stop-color="#d8e5f1" />
        <stop offset="100%" stop-color="#91b4d3" />
      </linearGradient>
    </defs>

    <path class="concave" fill="url(#gradient)" d="M-2 2 
            L75 2 A75 75 0 0 1 110 20 C200 100 400 100 480 20
            A75 75 0 0 1 525 2 L602 2 L602 122 L-2 122 z"/>
  </svg>
</div>



<div class="doublecurve">
  <svg viewBox="0 0 600 120" xmlns="http://www.w3.org/2000/svg">

    <defs>
      <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%"   stop-color="#d8e5f1"/>
        <stop offset="100%" stop-color="#91b4d3"/>
      </linearGradient>
    </defs>

    <path class="concave" fill="url(#gradient)" d="M-2 2 
            L75 2 A75 75 0 0 1 110 20 C200 100 400 100 480 20
            A75 75 0 0 1 525 2 L602 2 L602 -2 L-2-2"/>
  </svg>
</div>

CSS

.doublecurve {
  width: 100%;
  height: 0;
  margin: 20px 0;
  border: 1px dashed #bc9;
  padding-bottom: 20%;
  position: relative; }

.doublecurve svg { 
  position: absolute;
  width: 100%; height: 100%;}

.doublecurve path.concave { 
  stroke: #d0d0d0; 
  stroke-width: 4px;}

---

Final Result