底部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>

- Raymond Ativie

---

请使用代码片段将你的代码放在这里。 - core114

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

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

- Zakaria Acharki

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

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

- core114

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

- Anders_Askeland