How do I implement a curved trapezoid navbar?

Question

I want to implement this component in my project and I couldn't find too many good approaches to do this.

I tried clip path and got a sharp edged trapezoid. I then attempted to make it happen using SVG path property and using the concept of cubic beziers I managed to get this.

svgImage.svg

<svg width="300" height="100" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    <path d="M 30 10 L 270 10 C 285 10 285 90 300 90 L 0 90 C 15 90 15 10 30 10" stroke="black" fill="#002D62" />
</svg>

Example1.jsx

import React from 'react'
import image from '../assets/svgImage.svg';

const Example1 = () => {
    return (
        <div style={{ border: "2px solid red" }}>
            <img style={{ border: "3px solid blue" }} src={image} height="100" width="600"/>
        </div>
    )
}

export default Example1

The problem I am facing is that the final image is too small and I wasn't able to increase it height or width using width and height property of . In fact the image block size increased, but the image didn't. Also as a follow up I want to implement the buttons inside the component.

Answer 1

In my opinion, one of the best ways is to use the preserveAspectRatio attribute, taking advantage of the benefits of vectors.

return (
    <div className="svg-container">
      <svg
        viewBox="0 0 769.51 86.94"
        preserveAspectRatio="none"
        className="svg-content"
      >
        <defs>
          <style>
            {`.cls-1 {
                        fill: #0a2733;
                        stroke: #2f819b;
                        stroke-miterlimit: 10;
                    }`}
          </style>
        </defs>
        <path
          className="cls-1"
          d="m708.59,63.9c-1.88-1.59-2.83-2.58-5.35-5.11-3.24-3.25-26.51-29.18-42.6-40.6-10.98-7.79-30.55-17.54-64.52-17.7H173.38c-33.97.16-53.54,9.91-64.52,17.7-16.08,11.42-39.35,37.35-42.6,40.6-2.52,2.52-3.47,3.51-5.35,5.11C37.92,83.4.5,85.54.5,85.95c0,.99,179.07.35,384.26-.68,205.18,1.03,384.25,1.66,384.26.68,0-.4-37.42-2.55-60.42-22.04Z"
        />
      </svg>
    </div>
  );

//

.svg-container {
  width: 100%;
  height: 100px;
}

.svg-content {
  width: 100%;
  height: 100%;
}

I forgot to add that later you will also have to face the issue of buttons, because this method will, of course, s t r e t c h them. But I think it's much easier to get out of this problem...