Tilted background with rounded corners

Question

I'm trying to create a background for my divs which is like a rectangle (with rounded corners) but with the right corner lower than the left one. The height difference between those two corners must remain the same independently of the total height of the background.

Something like that :

I don't know which solution is the best : a full svg, or working only with clip-path in my css.

I tried to create manually an svg but the result seems not enough precise.

  <svg width="500" height="200">
    <defs>
      <mask id="roundCorner">
        <rect width="100%" height="100%" fill="white"/>

        //left corner
        <rect width="50" height="50" fill="black"/>
        <circle r="50" cx="50" cy="50" fill="white"/>
        
        //right corner
        <rect x='450' y="25" width="50" height="50" fill="black"/>
        <circle r="50" cx="450" cy="76" fill="white"/>

        //line
        <path d="M50 0 L500 30 L500 0 Z" fill='black'  />
      </mask>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" fill="lime" mask="url(#roundCorner)"/>
  </svg>

So how can I achieve a clean background like this in an efficient way ?