CSS、SASS - div 底部的微妙曲线 [英] CSS, SASS - subtle curve on bottom of div

问题描述

我试图在我的

底部实现微妙的曲线

这是我想要实现的目标的示例图像

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

section.box{边框左下角半径:40%；边框右下角半径:40%；}

这就是我得到的.

我该怎么做才能改变这种情况?

更新

我尝试过的:

.box{高度:300px；背景颜色:白色；}.圆底{背景颜色:粉红色；高度:200px；边框左下角半径:50%；边框右下角半径:50%；}

<section class="圆底"></节>

解决方案

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

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

并通过添加如下阴影:

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

希望这会有所帮助.

body{边距:0px；}div#box{高度:50px；宽度:100%；背景颜色:#ea3e5e；边界半径:0 0 100% 100%/100%；box-shadow: 1px -3px 22px 0px;}

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

I am trying to achieve a subtle curve at the bottom of my <div>

Here is an example image of what i am trying to achieve

I tried to achieve it by doing this :

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

This is what I'm getting.

What can i do to change this?

UPDATE

What I have tried :

.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>

解决方案

You could achive that by adjustion border-radius in your CSS rules like :

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

And by adding shadows like :

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

Hope this helps.

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>

这篇关于CSS、SASS - div 底部的微妙曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！