<div class="box"></div>
<img src="https://picsum.photos/id/152/300/300" alt="Purple flowers">

.box {
  width:300px;
  aspect-ratio:1;
  display:inline-block;
  border:1px solid blue;
  --g: 6px;   /* control the gap */
  --r: 42px;  /* control the circular shapes */
  background: 
    radial-gradient(var(--r) at left 50% bottom var(--r),green 95%,#0000),
    radial-gradient(calc(var(--r) + var(--g)) at calc(100% + var(--g)) 50%,#0000 95%,red) 
      top/100% calc(100% - var(--r)) no-repeat;
}
img {
  --g: 6px;   /* control the gap */
  --r: 42px;  /* control the circular shapes */
  --_m: 
    radial-gradient(calc(var(--r) + var(--g)) at calc(100% + var(--g)) 50%,#0000 95%,#000) 
      top/100% calc(100% - var(--r)) no-repeat, 
    radial-gradient(var(--r) at left 50% bottom var(--r),#000 95%,#0000);
  -webkit-mask: var(--_m);
          mask: var(--_m);
}