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;" />
</svg>
solved Curved/Slanted Line CSS or SVG [closed]