如何创建带圆角且右下角内凹的SVG形状

一、SVG路径实现精准形状 #

下面是直接可用的SVG路径代码，定义了左上角、右上角、左下角为外凸圆角，右下角为内凹圆角的形状，你可以按需调整尺寸和圆角半径：

<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <path d="M20,0 
           L280,0 
           A20,20 0 0 1 300,20 
           L300,160 
           A20,20 0 0 0 280,180 
           L260,180 
           A20,20 0 0 1 240,200 
           L20,200 
           A20,20 0 0 1 0,180 
           L0,20 
           A20,20 0 0 1 20,0 Z" 
        fill="rgba(255,255,255,0.2)" stroke="#333" stroke-width="2"/>
</svg>

路径参数调整说明： #

• 300/200：SVG的整体宽高，直接替换即可修改形状大小
• 所有A20,20中的20是圆角半径，外凸和内凹的圆角可以单独修改对应位置的数值
• 内凹效果的核心是倒数第二个A命令的扫掠标志设为1，和外凸圆角的方向相反，实现内凹弧度

二、内部应用backdrop-filter的方法 #

要实现仅形状内部区域应用模糊/背景滤镜，推荐用「SVG遮罩 + CSS backdrop-filter」的组合，兼容性和可控性更好：

示例代码（HTML+CSS）： #

<div class="backdrop-container">
  <!-- 定义遮罩的SVG -->
  <svg class="shape-mask" width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <clipPath id="innerShape">
        <path d="M20,0 L280,0 A20,20 0 0 1 300,20 L300,160 A20,20 0 0 0 280,180 L260,180 A20,20 0 0 1 240,200 L20,200 A20,20 0 0 1 0,180 L0,20 A20,20 0 0 1 20,0 Z"/>
      </clipPath>
    </defs>
  </svg>

  <!-- 应用模糊的内容层 -->
  <div class="blur-content"></div>
</div>

.backdrop-container {
  position: relative;
  width: 300px;
  height: 200px;
  /* 替换成你需要模糊的底层背景 */
  background: url('你的背景图路径') center/cover;
}

.shape-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 不遮挡容器内的交互事件 */
}

.blur-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(8px); /* 调整模糊程度 */
  -webkit-backdrop-filter: blur(8px); /* 兼容webkit内核浏览器 */
  clip-path: url(#innerShape); /* 用SVG遮罩裁剪出目标形状 */
  background: rgba(255,255,255,0.15); /* 可选：加半透明白色增强视觉效果 */
}

核心原理： #

1. 用SVG的clipPath定义好目标形状
2. 给需要应用滤镜的元素设置clip-path: url(#innerShape)，只保留形状内部的显示区域
3. 配合backdrop-filter实现仅内部区域的背景模糊，外部完全不受影响

如果不需要模糊底层背景，只是形状内部的内容模糊，把backdrop-filter换成普通的filter: blur()即可，同样能通过clip-path限制作用范围。

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