使用CSS将div的底部边缘向内弯曲-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

使用CSS将div的底部边缘向内弯曲

P粉384366923 2023-10-23 19:55:32

[HTML讨论组]

1186

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

有人知道如何实现它吗？

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

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

P粉384366923

全部回复(2)

P粉2116001742023-10-24 15:57:52 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;
}

赞 +0

添加回复

P粉9808152592023-10-24 00:00:31 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;
}

赞 +0

添加回复