svg - How to create molehill shape in CSS? -

i have customer request create upside-down molehill shape underneath header on website.

please see below. , know you're thinking, "dang man, paint skills epic, please teach me". reply "these skills can't taught".

i have tried several things try work, , have not been successful.

as paulie_d mentioned, making shape inline svg trivial. in following example, used path element 2 bezier curve commands :

svg{    display:block;    width:30%;    margin:0 auto;  }

<svg viewbox="0 0 10 5">    <path fill="#ff7f27" d="m10 0 c7.5 0 7.5 5 5 5 s2.5 0 0 0z" />  </svg>

on side note, can see here how aligning double curves in css hassle compared svg: css - double curved shape.