如何为我的图像创建带有倒圆的正确剪辑路径？

Question

我正在建立我们公司的新网站，但遇到了问题。

设计师创造了这样的图像：

所以这个右下角。其他角落都是

border-radius: 40px;

.

我正在尝试使用剪辑路径来创建这种类型的反向边框，但我对剪辑路径没有那么丰富的经验。

这就是我已经走了多远：

.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"/>

但我需要如图所示的波浪状、反向边框效果。 我知道您可以在一个剪辑路径中使用不同的形状，例如多个圆圈，但无法创建它。

有谁知道如何构建这样的剪辑路径？

Answer 1

使用面膜

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" >