Pure CSS Angled/Rounded Tab

Question

I've included an image because I couldn't quite describe it in words. But basically I'm looking to achieve this shape of a "tab" in the best way possible.

I know there's been questions about this before, using some new css3 tricks to rotate pieces into place, but I've never quite seen anything quite like this. Behind where there is currently the greenish-blue colour, there will be an image most likely. The red lines represent content on the page.

I've accomplished this in the past using a .png file with that little curved bit in it, but I hate doing that.

Also I've seen this:

How to make angled tab like this using css?

But it's not quite what I'm looking for, but if there's a similar solution, I'm open to that. I also need a way for the div to carry on to the far right edge of the screen, while still keeping the left part of the tab fixed in place.

SOLUTION FROM @chipChocolate.py

I used the solution from chip but I swapped it so that the tab was the svg element:

<svg viewBox="0 0 960 70" preserveAspectRatio="none">
    <path fill="#008882" d="M0,61c0,0,141,0,215.5,0C294,61,358,0.3,423.5,0.3c35,0,536.5,0,536.5,0v69.5H0V61z"/>
</svg>

Swapped the colour so that you could see it on here.

Answer 1

"I'm looking to achieve this shape of a "tab" in the best way possible" - Use svg.

<svg width="100%" height="84" viewBox="0 0 700 84" preserveAspectRatio="none">
  <path d="M0,0 h700 v30 h-280 c-60,0 -60,15 -100,30 c-10,4 -15,5 -35,6 h-285" fill="#008882" />
</svg>