使用 CSS 将 div 的底部弯曲到内部 [英] Curve bottom side of the div to the inside with CSS

问题描述

我想用 CSS 弯曲这个矩形 div/background 的底部，所以结果是这样的:

有人知道如何实现吗?

.curved {边距:0 自动；高度:400px；背景:浅蓝色；边界半径:0 0 200px 200px;}

<div class="curved"></div>

解决方案

简单地使用 border-radius 并依靠一些溢出.你也可以考虑使用伪元素来避免额外的标记:

.container {边距:0 自动；宽度:500px；高度:200px；背景:浅蓝色；位置:相对；溢出:隐藏；}.容器:在{之后内容: "";位置:绝对；高度:80px；左:-10%；右:-10%；边界半径:50%；底部:-25px；背景:#fff;}

<小时>

如果你想要一个透明的形状，你也可以使用radial-gradient:

body {背景:粉红色；}.容器 {边距:0 自动；宽度:500px；高度:200px；背景:径向渐变(底部 110% 50%，透明 50%，浅蓝色 51%)；}

<小时>

这是另一种使用 clip-path

.container {边距:0 自动；宽度:500px；高度:200px；背景颜色:浅蓝色；位置:相对；溢出:隐藏；}.容器:在{之后内容: "";位置:绝对；底部:0；右:-5%；左:-5%；高度:120px；背景:#fff;-webkit-clip-path: 椭圆 (50% 60% 在 50% 100%);剪辑路径:椭圆(50% 60% 在 50% 100%)；}

您也可以考虑使用 SVG:

.container {边距:0 自动；宽度:500px；高度:200px；背景:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='48'fill='lightblue'><path d='M0 0 L0 16 C16 6 48 6 64 16 L64 0 Z'/></svg>") 顶部中心/自动 700px 无重复；}

<小时>

如果您还想在形状周围添加边框，这里有一个示例:

.container {边距:0 自动；宽度:500px；高度:200px；边框:2px 实心 #000；边框底部:0；背景:浅蓝色；位置:相对；溢出:隐藏；}.容器:在{之后内容: "";位置:绝对；高度:80px；左:-10%；右:-10%；边界半径:50%；底部:-62px；背景:#fff;z-索引:2；}.容器:之前{内容: "";位置:绝对；高度:82px；左:-10%；右:-10%；边界半径:50%；底部:-62px；背景:#000；z-索引:1；}

<小时>

如果您想将图像或渐变作为具有透明度的背景，请使用

I would like to curve the bottom side of this rectangle div/background with CSS, so the result is something like this:

Does someone have an idea perhaps how it could be achieved?

.curved {
  margin: 0 auto;
  height: 400px;
  background: lightblue;
  border-radius:0 0 200px 200px;
}

<div class="container">
  <div class="curved"></div>
</div>

解决方案

Simply use border-radius and rely on some overflow. You can also consider pseudo element to avoid extra markup:

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  background: lightblue;
  position: relative;
  overflow: hidden;
}

.container:after {
  content: "";
  position: absolute;
  height: 80px;
  left: -10%;
  right: -10%;
  border-radius: 50%;
  bottom: -25px;
  background: #fff;
}

<div class="container">
</div>

---

You can also use radial-gradient if you want a transparent shape:

body {
  background: pink;
}

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  background: radial-gradient(110% 50% at bottom, transparent 50%, lightblue 51%);
}

<div class="container">
</div>

---

And here is another way using clip-path

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  background-color: lightblue;
  position: relative;
  overflow: hidden;
}

.container:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -5%;
  left: -5%;
  height: 120px;
  background: #fff;
  -webkit-clip-path: ellipse(50% 60% at 50% 100%);
  clip-path: ellipse(50% 60% at 50% 100%);
}

<div class="container">
</div>

You can also consider SVG:

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='48' fill='lightblue'><path d='M0 0 L0 16 C16 6 48 6 64 16 L64 0 Z' /></svg>") top center/auto 700px no-repeat;
}

<div class="container">
</div>

---

Here is an example if you want also to add border around your shape:

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  border: 2px solid #000;
  border-bottom: 0;
  background: lightblue;
  position: relative;
  overflow: hidden;
}

.container:after {
  content: "";
  position: absolute;
  height: 80px;
  left: -10%;
  right: -10%;
  border-radius: 50%;
  bottom: -62px;
  background: #fff;
  z-index: 2;
}

.container:before {
  content: "";
  position: absolute;
  height: 82px;
  left: -10%;
  right: -10%;
  border-radius: 50%;
  bottom: -62px;
  background: #000;
  z-index: 1;
}

<div class="container">
</div>

---

If you want to have an image or gradient as background with the transparency, use mask-image:

body {
  background: pink;
}

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  -webkit-mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);
          mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);
  background: linear-gradient(45deg,red,yellow,blue);
}

<div class="container">
</div>

这篇关于使用 CSS 将 div 的底部弯曲到内部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！