能否用clip-path与SVG实现指定形状的移动端底部上滑模态框？

完全可以用clip-path结合SVG实现你要的效果，完美匹配三个需求，具体实现如下：

实现方案 #

原理说明 #

• 模态框主体固定在屏幕底部，内容区域高度随内容自动调整，超出部分可滚动
• 顶部的"山丘"形状通过内联SVG定义裁剪路径，确保形状的宽高比例和尺寸固定，不受屏幕宽度影响
• 直接给模态框容器设置背景属性，即可轻松实现纯色、渐变或图片背景

代码示例 #

HTML

<div class="bottom-modal">
  <div class="modal-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

<!-- 内联SVG定义裁剪路径，不占用页面空间 -->
<svg width="0" height="0" viewBox="0 0 400 40" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="fixedHillClip" clipPathUnits="objectBoundingBox">
      <!-- 将固定尺寸路径转为相对百分比，保证形状比例固定 -->
      <path d="M0,1 C0.125,0.4 0.3,0 0.5,0 C0.7,0 0.875,0.4 1,1 L1,1 L0,1 Z" />
    </clipPath>
  </defs>
</svg>

CSS

.bottom-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* 自定义背景，这里用渐变示例 */
  background: #4facfe;
  background: linear-gradient(to right, #00f2fe, #4facfe);
  /* 应用SVG裁剪路径 */
  clip-path: url(#fixedHillClip);
  /* 顶部预留形状高度，避免内容被裁剪 */
  padding-top: 40px;
}

.modal-body {
  padding: 1.5rem;
  color: #fff;
  /* 限制最大高度，内容过长时可滚动 */
  max-height: 70vh;
  overflow-y: auto;
}

需求匹配说明 #

1. 内容自适应高度：.bottom-modal未设置固定高度，完全由.modal-body的内容撑开；同时给内容区域设置了max-height和滚动属性，避免内容溢出屏幕
2. 固定尺寸山丘形状：SVG的viewBox="0 0 400 40"定义了形状的固定宽高（400px宽、40px高），通过clipPathUnits="objectBoundingBox"将路径转换为相对百分比，确保无论屏幕宽度如何，顶部形状的大小和比例都保持固定
3. 自定义背景：直接给.bottom-modal设置background属性即可，支持纯色、渐变、背景图片等任意样式，裁剪路径会自动作用于整个容器的背景

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