How to round corners when using a CSS clip

Question

I want to be able to round the 3 left corners on this figure that I created, any idea how this can be done?

div{ position: absolute; z-index: 1; width: 423px; height: 90px; background-color: #b0102d; color: white; right: 0; margin-top: 10vw; -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%); clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%); } 

 <div></div> 

Answer 1

I don't have the comment option yes, so I write this as an answer.

You need to write as many points around the corner as possible. Nothig yet ... for, for example, a few more points to make a narrower bit:

 -webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 25% 100%, 5% 70%,1% 60%, 0% 50%, 25% 0%); 

oh yes, or SVG as people's comments here .. :)

Answer 2

You can also team up with a circle to get several different effects.

 -webkit-clip-path: circle(60.0% at 50% 10%); clip-path: circle(50.0% at 50% 50%); 

Codepen

It is too bad that you cannot combine a polygon and a circle ... or maybe you can, and I have not played with it enough to understand this. NTN

Answer 3

Make a rectangular clip and place a thick rectangle with a rounded border above it. Good luck