div底部的微妙曲线答案

【问题标题】：Subtle curve on bottom of divdiv底部的微妙曲线
【发布时间】：2021-11-15 18:51:56
【问题描述】：

我试图在<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>

【问题讨论】：

能否请您使用代码 sn-p 输入您的代码

标签： html css sass

【解决方案1】：

您可以通过在 CSS 规则中调整 border-radius 来实现，例如：

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

并通过添加阴影，例如：

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

希望这会有所帮助。

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

&lt;div id="box"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

使用椭圆边框border-radius你可以了解更多请参考这个https://www.w3schools.com/css/css3_borders.asp

#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 ;
}

&lt;p id="rcorners9"&gt;&lt;/p&gt;

【讨论】：

【解决方案3】：

我个人通过将图像延伸到屏幕边缘之外来实现这个结果，如下所示：

.curved {
    border-bottom-left-radius: 95% 65%;
    border-bottom-right-radius: 95% 65%;
}
.full-width {
    min-width: 150%;
    display: flex;
    margin-left: -25vw;
    margin-right: -25vw;
    justify-content: center;
}

【讨论】：