<div class="box"></div>
.box {
  --h: 200px; /* element height */
  --s: 90px;  /* slant size */
  --r: 20px; /* radius */
  
  height: var(--h);
  background: linear-gradient(60deg,#C02942,#542437);
  border-radius: var(--r) 0 0 var(--r);
  --_a: atan2(var(--s),var(--h));
  clip-path: 
   shape(from 0 0,
    line  to calc(100% - var(--s) - var(--r)) 0,
    curve by calc(var(--r)*(1 + sin(var(--_a)))) 
             calc(var(--r)*cos(var(--_a)))
    with var(--r) 0,
    line  to calc(100% - var(--r)*sin(var(--_a))) 
             calc(100% - var(--r)*cos(var(--_a))),
    curve to calc(100% - var(--r)) 100% 
    with 100% 100%,
    line to 0 100%
   );
}

:nth-child(2 of .box) {
  margin: 20px 50px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.