<div class="box"></div>

.box {
  --size: 50px;
  --b: 10px;
  --p: 25px;
  
  --_g: #0000 calc(99% - var(--b)),#000 calc(101% - var(--b)) 99%,#0000 101%;
  -webkit-mask:
    radial-gradient(55.9px at left 50% bottom calc(-1*var(--p)),var(--_g)) 
      calc(50% - 2*var(--size)) 50%/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x,
    radial-gradient(55.9px at left 50% top    calc(-1*var(--p)),var(--_g)) 
      50%                       50%/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x;
  background: linear-gradient(90deg,red,blue);
  height: 200px;
}