不使用图片如何为div实现底部ragged edge（锯齿边缘）效果

你担心的SVG响应式问题完全可以通过相对单位规避，以下两种方案都不需要引入外部图片，天然支持响应式适配：

方案1：纯CSS mask实现（最简便） #

通过多层线性渐变拼接出不规则的锯齿效果，所有单位使用百分比，可自适应任意div宽度：

.ragged-div {
  /* 原有div样式，比如背景色、内边距等 */
  background: #2c3e50;
  padding: 2rem 2rem 4rem;
  /* 核心毛边效果 */
  mask: 
    linear-gradient(135deg, transparent 15px, #000 0) 0 50%,
    linear-gradient(225deg, transparent 15px, #000 0) 0 50%,
    linear-gradient(315deg, transparent 15px, #000 0) 100% 100% / 30px 30px repeat-x,
    linear-gradient(45deg, transparent 15px, #000 0) 100% 100% / 30px 30px repeat-x;
  -webkit-mask: 
    linear-gradient(135deg, transparent 15px, #000 0) 0 50%,
    linear-gradient(225deg, transparent 15px, #000 0) 0 50%,
    linear-gradient(315deg, transparent 15px, #000 0) 100% 100% / 30px 30px repeat-x,
    linear-gradient(45deg, transparent 15px, #000 0) 100% 100% / 30px 30px repeat-x;
}

• 调整渐变的15px（透明缺口大小）、30px（重复单元宽度）可以改变毛边的粗糙程度
• 想要更自然的不规则效果，可以新增更多不同参数的渐变层，错开缺口位置

方案2：内联SVG clip-path实现（自由度最高） #

把clipPath直接内联在HTML中，使用相对比例单位objectBoundingBox实现完全响应式，不需要外部SVG文件：
首先在HTML中插入隐藏的SVG定义：

<svg width="0" height="0" style="position:absolute;visibility:hidden;">
  <defs>
    <clipPath id="raggedClip" clipPathUnits="objectBoundingBox">
      <!-- 坐标全部为0-1的相对值，对应div的宽高比例 -->
      <path d="M0,0 L1,0 L1,0.9 L0.95,0.92 L0.9,0.89 L0.85,0.93 L0.8,0.9 L0.75,0.94 L0.7,0.91 L0.65,0.95 L0.6,0.9 L0.55,0.93 L0.5,0.89 L0.45,0.94 L0.4,0.91 L0.35,0.95 L0.3,0.9 L0.25,0.92 L0.2,0.89 L0.15,0.93 L0.1,0.9 L0.05,0.94 L0,0.9 Z" />
    </clipPath>
  </defs>
</svg>

然后给目标div添加clip-path属性：

.ragged-div {
  background: #2c3e50;
  padding: 2rem;
  clip-path: url(#raggedClip);
}

• 调整path里的Y轴数值（比如0.9、0.92这类）可以修改毛边的起伏程度，调整X轴的点位数量可以改变毛边的密度
• 如果需要每次加载展示不同的随机毛边，可以用JS动态生成path的坐标值

两种方案都完全适配响应式场景，不需要依赖任何外部图片资源，可根据你的需求调整效果细节。

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