<div class="wave"></div>

.wave {
  --size: 50px;
  --b: 10px;
  --m: 0.5;
  --p: calc(var(--m)*var(--size));
  --R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
  
  --_g: #0000 calc(99% - var(--b)),#000 calc(101% - var(--b)) 99%,#0000 101%;
  -webkit-mask:
    radial-gradient(var(--R) at top 50% right calc(-1*var(--p)),var(--_g)) 
      calc(50% - var(--size)/2 - var(--b)/2) calc(50% - 2*var(--size)) / calc(var(--size) + var(--b)) calc(4*var(--size)) ,
    radial-gradient(var(--R) at top 50% left  calc(-1*var(--p)),var(--_g)) 
     calc(50% + var(--size)/2 + var(--b)/2) 50%/calc(var(--size) + var(--b)) calc(4*var(--size)) ;
  background: linear-gradient(90deg,red,blue);
  height: 300px;
}