使用clip-path+SVG filter实现响应式圆角Div遇问题求解决方案

需要在客户项目中创建响应式圆角自定义形状Div，尝试用clip-path结合SVG滤镜实现圆角效果，但无法达到预期，还存在滤镜裁切边缘的问题。以下是当前最优效果的代码，寻求能实现美观且响应式复杂形状的替代方案：

当前代码 #

CSS #

.shape-14 {
  position: relative;
  background: #000000;
  width: 33%;
  height: 100%;
  min-height: 370px;
  clip-path: polygon(0 0, 128px 0, 128px 104px, 100% 104px, 100% 100%, 0 100%, 0 0);
}

.shape-14::before {
  content: '';
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background: #FDEEE1;
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  clip-path: polygon(0 0, 120px 0, 120px 104px, 100% 104px, 100% 100%, 0 100%, 0 0);
}

.shape-14-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  align-items: stretch;
  display: flex;
}

.css-shape-blur {
  filter: url('data:image/svg+xml,\
      <svg xmlns="http://www.w3.org/2000/svg">\
      <filter id="corners">\
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />\
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -16" />\
      <feComposite in="SourceGraphic" in2="corners" operator="in"/>\
  </filter>\
  </svg>#corners')
}

HTML #

<div class="css-shape-blur">
  <div class="shape-14-wrapper">
    <div class="shape-14">
      <p class="p-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
      </p>
    </div>
    <div class="shape-14">
      <p class="p-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
      </p>
    </div>
  </div>
</div>

替代方案 #

方案1：CSS Mask + 渐变实现精准形状 #

利用CSS mask结合径向渐变、线性渐变，直接定义形状的切角与圆角，无需滤镜，天然响应式，边缘无裁切问题。

.shape-14 {
  position: relative;
  width: 33%;
  min-height: 370px;
  background: #FDEEE1;
  border: 4px solid #000;
  /* 组合遮罩实现左上角切角+圆角效果 */
  mask: 
    /* 左上角切角区域遮罩 */
    linear-gradient(to bottom right, transparent 49.5%, black 50%) 0 0 / 120px 100px no-repeat,
    /* 切角处的圆角遮罩 */
    radial-gradient(circle 8px at 120px 100px, transparent 50%, black 51%) no-repeat,
    /* 主体遮罩覆盖剩余区域 */
    linear-gradient(black, black);
  mask-composite: exclude;
}

.shape-14-wrapper {
  gap: 16px;
  align-items: stretch;
  display: flex;
}

方案2：内联SVG作为遮罩还原设计细节 #

用SVG绘制与设计完全一致的矢量形状，作为CSS遮罩使用，完美还原设计细节，支持任意尺寸缩放。

.shape-14 {
  position: relative;
  width: 33%;
  min-height: 370px;
  background: #FDEEE1;
  border: 4px solid #000;
  /* 内联SVG作为遮罩，path路径可根据设计调整 */
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L12,0 L12,10 A8,8 0 0 1 20,10 L100,10 L100,100 L0,100 Z" fill="black"/></svg>') 0 0 / 100% 100% no-repeat;
}

.shape-14-wrapper {
  gap: 16px;
  align-items: stretch;
  display: flex;
}

方案3：优化现有clip-path结构，去除滤镜 #

调整DOM结构，去掉全局滤镜，用border-radius直接处理切角处的圆角，避免边缘裁切问题。

.shape-14 {
  position: relative;
  background: #000;
  width: 33%;
  min-height: 370px;
  clip-path: polygon(0 0, 128px 0, 128px 104px, 100% 104px, 100% 100%, 0 100%, 0 0);
  padding: 4px;
}

.shape-14-inner {
  background: #FDEEE1;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 120px 0, 120px 104px, 100% 104px, 100% 100%, 0 100%, 0 0);
  /* 切角处添加圆角 */
  border-top-right-radius: 8px;
}

.shape-14-wrapper {
  gap: 16px;
  align-items: stretch;
  display: flex;
}

对应的HTML结构：

<div class="shape-14-wrapper">
  <div class="shape-14">
    <div class="shape-14-inner">
      <p class="p-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
    </div>
  </div>
  <div class="shape-14">
    <div class="shape-14-inner">
      <p class="p-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
    </div>
  </div>
</div>

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