如何实现Figma设计中带顶部拱形的弧形边框响应式Div？

针对你的需求，提供两种方案：纯CSS简便实现，以及精准还原Figma的SVG方案，都支持移动端/平板响应式。

方案一：纯CSS快速实现（适合新手） #

不需要复杂代码，用伪元素+border-radius就能做出近似效果，参数可根据设计灵活调整：

/* 容器基础样式 */
.arch-container {
  position: relative;
  width: 90%;
  max-width: 1000px;
  margin: 2rem auto;
  background: #fff;
  border-radius: 0 0 24px 24px; /* 底部弧形边框 */
  padding: 3.5rem 1.5rem 1.5rem; /* 给顶部拱形预留空间 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 可选：增强质感 */
  overflow: hidden;
}

/* 顶部拱形伪元素 */
.arch-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 48px; /* 拱形高度，按需调整 */
  background: #fff;
  /* 用border-radius生成中间向上的拱形，左右与容器自然衔接 */
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  /* 匹配容器边框样式 */
  border-bottom: 1px solid #e5e7eb;
}

这个方案代码量少、易修改，百分比宽度+max-width的组合能自动适配手机/平板屏幕。

方案二：SVG精准还原（完全匹配Figma设计） #

如果纯CSS的近似效果达不到要求，用SVG可以1:1还原Figma的形状，以下是响应式版本：

<div class="svg-container">
  <!-- 响应式形状SVG -->
  <svg class="shape-svg" viewBox="0 0 1000 600" preserveAspectRatio="none">
    <path d="M0,60 C150,60 350,0 500,0 C650,0 850,60 1000,60 L1000,540 C850,540 650,600 500,600 C350,600 150,540 0,540 Z" fill="#ffffff" stroke="#e5e7eb" stroke-width="2"/>
  </svg>
  <!-- 内容区域 -->
  <div class="content">
    这里放置你的内容
  </div>
</div>

<style>
.svg-container {
  position: relative;
  width: 90%;
  max-width: 1000px;
  margin: 2rem auto;
}

.shape-svg {
  width: 100%;
  height: auto;
  display: block;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 3rem 1.5rem 2rem;
  box-sizing: border-box;
}
</style>

调整说明： #

1. viewBox数值对应你Figma中形状的原始尺寸，可直接替换；
2. path里的坐标可以从Figma导出的SVG中复制，保证完全匹配设计；
3. preserveAspectRatio="none"让SVG自动拉伸适配容器宽度，实现响应式；
4. 内容用绝对定位放在SVG上方，不影响形状显示。

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