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

Posted 2023-03-28

【中文标题】CSS Border-radius创建弯曲形状[重复]

【英文标题】：CSS Border-radius to create curved shape [duplicate]

【发布时间】：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%；

您确定原始来源没有使用内置该曲线的图像吗？因为这看起来不像应用了边框半径的形状。 （它必须是一个绝对巨大的圆才能获得那个曲率！）

【参考方案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%;