html - CSS Border-radius 创建弯曲形状

Question

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

我正在使用这些值，但没有得到类似的结果。

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

Answer 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%; 
}

输出：

让我知道它是否有帮助。

Answer 2

你试过用 CSS 做这个吗？

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

Answer 3

您可以通过使用边框半径选项来做到这一点。

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