CSS Border-radius创建弯曲形状[重复]答案

【问题标题】：CSS Border-radius to create curved shape [duplicate]CSS Border-radius创建弯曲形状[重复]
【发布时间】：2021-11-19 10:21:08
【问题描述】：

我想使用 HTML CSS 创建这个形状（见附图）。

我正在使用这些值，但得到的结果不相似。

 border-radius: 0% 0% 50% 50% / 70% 60% 20% 20%;

【问题讨论】：

这个链接有帮助吗？ shapedivider.app 。我不认为边界半径可以创建那个形状
您使用的是什么值？请发布您的代码。
高度：640px；边界半径：0% 0% 50% 50% / 70% 60% 20% 20%；
您确定原始来源没有使用内置该曲线的图像吗？因为这看起来不像应用了边框半径的形状。（它必须是一个绝对巨大的圆才能获得那个曲率！）

标签： html css shapes border-radius

【解决方案1】：

您也可以通过将border-bottom CSS 属性赋予容器来尝试这种方法：

.curve-style {
  border-bottom-left-radius: 50% 200px; 
  border-bottom-right-radius: 50% 200px; 
  width: 160%; overflow: hidden; 
  margin-bottom: -50px; 
  position: relative; 
  left:-30%; 
}

输出：

如果有帮助，请告诉我。

【讨论】：

【解决方案2】：

您是否尝试过在 CSS 中这样做？

    img {
        border-radius: 0 0 50% 50%;
    }

【讨论】：

【解决方案3】：

您可以使用 border-radius 选项来做到这一点。

检查这行代码：border-radius: 0 0 60% 60% / 10%;

【讨论】：