<div class="box"></div>
<div class="box" style="--a: 20deg"></div>
<div class="box bottom" style="--a: 30deg;--r:30px;--s:20px"></div>

.box {
  --r: 20px; /* control the rounded part*/
  --s: 40px; /* control the size of the cut */
  --a: 40deg; /* control the depth of the curvature*/
  
  height: 120px;
  margin-block: 20px;
  background: linear-gradient(45deg,#FF4E50,#40C0CB);
  --_m:0/calc(2*var(--r)) calc(2*var(--r)) no-repeat
    radial-gradient(50% 50%,#000 calc(100% - 1px),#0000);
  --_d:(var(--s) + var(--r))*cos(var(--a));
  mask:
    calc(50% + var(--_d)) var(--_m),calc(50% - var(--_d)) var(--_m),
    radial-gradient(var(--s) at 50% calc(-1*sin(var(--a))*var(--s)),
      #0000 100%,#000 calc(100% + 1px)) 0 calc(var(--r)*(1 - sin(var(--a)))) no-repeat,
    linear-gradient(90deg,#000 calc(50% - var(--_d)),#0000 0 calc(50% + var(--_d)),#000 0);
}
.bottom {
  --_m:100%/calc(2*var(--r)) calc(2*var(--r)) no-repeat
    radial-gradient(50% 50%,#000 calc(100% - 1px),#0000);
  mask:
    calc(50% + var(--_d)) var(--_m),calc(50% - var(--_d)) var(--_m),
    radial-gradient(var(--s) at 50% calc(100% + sin(var(--a))*var(--s)),
      #0000 100%,#000 calc(100% + 1px)) 0 calc(var(--r)*(sin(var(--a)) - 1)) no-repeat,
    linear-gradient(90deg,#000 calc(50% - var(--_d)),#0000 0 calc(50% + var(--_d)),#000 0);
}

body {
  margin: 0;
}