如何为图片创建带反向圆形的正确clip-path实现指定边框效果？

方案1：使用CSS clip-path: path()（现代浏览器适用） #

直接用CSS路径函数实现平滑圆角和反向波浪，代码如下：

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

.image {
  width: 100%; /* 支持自适应容器 */
  max-width: 400px; /* 可选，限制最大宽度 */
  /* 路径逻辑：左上/右上/左下为40px圆角，右下角做向内凹的波浪 */
  clip-path: path('M40,0 Hcalc(100% - 40) Q100%,0 100%,40 Vcalc(100% - 40) Hcalc(100% - 80) Qcalc(100% - 40),calc(100% - 40) calc(100% - 40),100% H40 Q0,100% 0,calc(100% - 40) V40 Q0,0 40,0 Z');
}

路径说明：

• M40,0：从左上角圆角起点开始
• Hcalc(100% - 40)：水平向右到右上角圆角左端点
• Q100%,0 100%,40：用二次贝塞尔曲线画出右上圆角
• Vcalc(100% - 40)：垂直向下到右下角圆角上端点
• Hcalc(100% - 80)：水平左移80px（两个圆角半径长度）
• Qcalc(100% - 40),calc(100% - 40) calc(100% - 40),100%：画出向内凹的反向波浪
• 剩余部分完成左下、左上圆角并闭合路径

方案2：使用SVG clipPath（兼容性更好） #

如果需要兼容旧浏览器，用SVG定义裁剪路径更可靠：

<!-- 隐藏的SVG，用于定义裁剪路径 -->
<svg width="0" height="0" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="waveClip">
      <!-- 用百分比单位，自适应图片尺寸 -->
      <path d="M4,0 H96 Q100,0 100,4 V96 H84 Q92,96 92,100 H4 Q0,100 0,96 V4 Q0,0 4,0 Z" />
    </clipPath>
  </defs>
</svg>

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

.image {
  width: 100%;
  max-width: 400px;
  clip-path: url(#waveClip);
}

调整说明：

• 想要改变波浪大小或圆角半径，只需修改路径里的数值：比如把4改成其他百分比（对应圆角占图片尺寸的比例），把84改成其他数值调整波浪宽度。

内容的提问来源于stack exchange，提问作者SybrenMeister