在 HTML 和 CSS 中制作弯曲的顶部和底部边框

Question

我是开发新手。在 figma 设计中，我有一个 div，顶部边框和底部边框是弯曲的，div 顶部边框的中心也有拱形。我试过边界半径，但它并没有让我看起来像 figma 设计。

有人建议我使用 svg 路径，但这对我来说非常复杂。有人可以建议我更好的实现方式或 svg 代码来实现这个设计。

我还希望它也能响应移动屏幕和标签屏幕。

Figma设计

我尝试了边界半径，但它看起来不像 figma。

Answer 1

试试这个：

.ellipse{ 
     height:400px;
     background:#f66;
     clip-path: ellipse(59% 50%);
     margin-top: 100px;
}
.arch { 
  height: 500px;
  background: #f66;
  margin-top: -500px;
}
.a1{ 
  clip-path: ellipse(45% 31%);
}
.a2{ 
  clip-path: ellipse(45% 32%);
}
.a3{ 
  clip-path: ellipse(45% 33%);
}

<div class="ellipse">
</div>
<div class="arch a1">
</div>
<div class="arch a2">
</div>
<div class="arch a3">
</div>

Answer 2

你可以尝试这样的剪辑路径：

clip-path: ellipse(200px 500px at 50% 50%);