<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));
  
  height: 200px;
  margin: 10px 0;
  
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)),#0000 calc(99% - var(--b)),#000 calc(101% - var(--b)) 99%,#0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4*var(--size)) 100%,
    radial-gradient(var(--R) at left 50% top    calc(-1*var(--p)),#0000 calc(99% - var(--b)),#000 calc(101% - var(--b)) 99%,#0000 101%) 
      50% var(--size)/calc(4*var(--size)) 100%;
  background:linear-gradient(90deg,red,blue);  
}