Curved/Slanted Line CSS or SVG [closed]

How exactly could I add something like this to my website? Using SVG, CSS or HTML. I am unable to find anything similar to this.

P.S Ignore the circle/ring please.


At least with SVG this is rather easy to achieve using a <path> and some curve commands:

<svg viewBox="0 0 100 30">
  <path d="M 0,0 100,0 100,30 Q 100,15 50,15 Q 0,15 0,0 Z" style="fill: steelblue;" />