How to round out corners when using CSS clip-path

Question

I want to be able to round out the 3 leftmost corners on this shape that I have created, any idea how that can be done?

Answer 1

I've recently found success experimenting with approaches like this...

SVG

CSS

.clipped {
  --myWidth: 100vw;
  --myHeight: 10rem;
  --myRad: 2rem;
  clip-path: url(#clipped);
}

I found this useful as compared to using border-radius with overflow set to hidden, because this approach doesn't create a BFC or break things like sticky position and css perspective effects. Also, this allows you to "inset" the position of the svg paths to clip inside the element with a "corner-radius" if you want.