我们在开发过程中可能会遇到各种各样的样式要去实现，今天列举一个我在开发过程中遇到的一个案例

先上效果图

如何实现如下源码

<body>
    <div class="container">
      <div class="box">这是BOX</div>
    </div>
  </body>

<style>
      .container {
        height: 700px;
        width: 500px;
        background-color: pink;
      }
      .box {
        width: 500px;
        height: 200px;
        position: relative;
        z-index: 1;
        text-align: center;
        line-height: 200px;
      }
      .box::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        left: 0;
        z-index: -1;
        border-radius: 0 0 50% 50%;
        background-color: #50c7fb;
      }
    </style>

原理

利用伪元素即可轻松实现，宽高以及圆角边框可以看具体需求去调整

最后

如有错误欢迎留言指正，或者有其他方法可以分享

CSS--实现div底部圆弧

先上效果图

如何实现 如下源码

原理

最后

如何实现如下源码