使用 CSS 将 div 的底部弯曲到内部答案

【问题标题】：Curve bottom side of the div to the inside with CSS使用 CSS 将 div 的底部弯曲到内部
【发布时间】：2020-05-24 03:21:49
【问题描述】：

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

有人知道如何实现吗？

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

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

【问题讨论】：

标签： html css css-shapes

【解决方案1】：

只需使用 border-radius 并依赖于一些溢出。您还可以考虑使用伪元素来避免额外的标记：

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

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

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>

这是另一种使用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>

您还可以考虑 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>

这是一个示例，如果您还想添加边界围绕你的形状：

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

如果你想将图像或渐变作为具有透明度的背景，请使用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>

【讨论】：

您认为哪种方式与浏览器最兼容？
也可以说 width: 120% 而不是 margin-left: -10%; margin-right: -10%
@Shahriar 单独的宽度不会给你正确的对齐方式。您可以使用 width:120% 和 left:-10% 或 left 和 right 都为 -10%
@TemaniAfif 你是对的。在我的例子中，.container 是 display: flex; justify-content: center。

【解决方案2】：

检查这个。我用 :after 伪元素创建了这个。如果背景是纯色，这会很有帮助。

.curved {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  background: lightblue;
  position: relative;
}
.curved:after{
  background: white;
  position: absolute;
  content: "";
  left:0;
  right:0;
  bottom: -25px;
  height: 50px;
  border-radius: 50% 50% 0 0;
}

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

【讨论】：