首页  >  问答  >  正文

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

我想用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粉384366923P粉384366923382 天前853

全部回复(2)我来回复

  • P粉211600174

    P粉2116001742023-10-24 15:57:52

    检查一下。我用 :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粉980815259

    P粉9808152592023-10-24 00:00:31

    只需使用 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
  • 取消回复