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?

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've recently found success experimenting with approaches like this...

SVG

<svg width="0" height="0">   <defs>     <clipPath id="clipped">       <circle cx="var(--myRad)" cy="var(--myRad)" r="var(--myRad)"></circle>       <circle cx="var(--myRad)" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>       <circle cx="calc(var(--myWidth) - var(--myRad))" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>       <circle cx="calc(var(--myWidth) - var(--myRad))" cy="var(--myRad)" r="var(--myRad)"></circle>       <rect y="var(--myRad)" width="var(--myWidth)" height="calc(var(--myHeight) - (2 * var(--myRad)))"></rect>       <rect x="var(--myRad)" width="calc(var(--myWidth) - (2 * var(--myRad)))" height="var(--myHeight)"></rect>     </clipPath>   </defs> </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.