How do I create the correct clip-path with inversed circles for my image?

Question

I'm building our companies new website, but am running into an issue.

The designer created images like this:

So this bottom right corner. The other corners are all border-radius: 40px;.

I'm trying to use a clip-path to create this type of inverse border, but am not that experienced with clip-paths.

This is how far I got:

.image {
  clip-path: polygon(0 0, 100% 0, 100% 83%, 87% 86%, 83% 100%, 0 100%);
}

<img src="https://staging.mailmeisters.nl/wp-content/uploads/2024/01/Team-foto-mobiel.jpg" class="image" alt="Image with wave effect"/>

But I need this wavey, inverse border effect as shown in the image. I know you can use different shapes in one clip path, like multiple circles, but did not manage to create it.

Does anyone know how to build this clip-path like this?

Answer 1

Use mask

img {
  --r: 30px; /* radius */
  /* control the cutout */
  --x: 80px;
  --y: 80px;
  /**/
  
  width: 250px;
  border-radius: var(--r);
  --g:/var(--r) var(--r) no-repeat exclude 
    radial-gradient(100% 100% at 0 0,#0000 100%,#000 calc(100% + 1px));
  mask:
    calc(100% - var(--x)) 100% var(--g),100% calc(100% - var(--y)) var(--g),
    radial-gradient(100% 100% at 100% 100%,#0000 100%,#000 calc(100% + 1px))
     calc(100% - var(--x) + var(--r)) calc(100% - var(--y) + var(--r))/
     var(--r) var(--r) no-repeat,
    conic-gradient(from 90deg at right var(--x) bottom var(--y),#0000 25%,#000 0);
}

<img src="https://picsum.photos/id/1069/300/300" >