CSS：圆角效果[重复]

【问题标题】：CSS: Rounded effect [duplicate]CSS：圆角效果[重复]
【发布时间】：2020-07-25 02:37:57
【问题描述】：

我想用 CSS 使这个效果四舍五入。

但是，我只能做这个效果：

这是代码：

如何实现这种效果并做出响应？

【问题讨论】：

标签： css

【解决方案1】：

只需将px 更改为%：border-radius: 0px 0px 50% 500%;：

body {
  height: 100vh;
  width: 100%;
}

#oval {
  position: relative;
  width: 100%;
  height: 100px;
  background: #ffffff;
  border-radius: 0px 0px 50% 500%;
}

<div style="width: 100%; height: 100px; background-color: #30393b">
  <div id="oval" />
</div>
<div style="width: 100%; height: 100px; background-color: #30393b" />

【讨论】：