CSS，SASS - div底部的微妙曲线

Question

我正在尝试在<div>

的底部实现微妙曲线

以下是我想要实现的示例图像

我试图通过这样做来实现它：

section.box{
    border-bottom-left-radius: 40%;
    border-bottom-right-radius: 40%;
}

这就是我得到的。

我该怎么做才能改变这个？

更新

我尝试了什么：

.box{
  height: 300px;
  background-color: white;
}

.round-bottom{
  background-color: pink;
  height: 200px;
  
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div class="box">
  <section class="round-bottom">
      
  </section>
</div>

Answer 1

您可以通过CSS规则中的border-radius来实现这一点，例如：

  border-radius: 0 0 100% 100%  /100%;

并添加阴影，如：

  box-shadow: 1px -3px 22px 0px;

希望这有帮助。

＆＃13;

＆＃13;

body{
  margin: 0px;
}
div#box{
  height: 50px;
  width: 100%;
  background-color: #ea3e5e;
  border-radius: 0 0 100% 100%  /100%;
  box-shadow: 1px -3px 22px 0px;
}

＆＃13;

<div id="box"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用椭圆边框border-radius您可以了解更多相关信息，请参阅https://www.w3schools.com/css/css3_borders.asp

＆＃13;

＆＃13;

#rcorners9 {
   border-bottom-left-radius: 95% 65%;
    border-bottom-right-radius: 95% 65%;
    background: #FF3352;
    padding: 20px; 
    width:100%;
    height: 10px; 
    box-shadow: 1px -5px 22px ;
}

＆＃13;

<p id="rcorners9"></p>

＆＃13;

＆＃13;

＆＃13;