.bg {
 /* 定位 */
    position: relative;
    width: 100%;
    height: 200px;
    /*子元素溢出隐藏*/
    overflow: hidden;
    /*因为父级还有其它子元素需要显示，伪类设置-1后其它子元素将不能正常显示*/
    z-index:99;
 }

 .bg :after {
    /* 这个伪类的作用就是一个圆弧的背景色 */
    width: 140%;
    height: 200px;
    position: absolute;
    /*设置水平居中*/
    left: -20%;
    /* 之所以left:20%,是因为width:140%，若width:160%，那么left:30%才能水平居中 */
    top: 0; 
    z-index: -1;
    /*层叠顺序，最底层显示*/
    content: '';
    border-radius: 0 0 50% 50%;
    /*分别对应 左上 右上 右下 左下 可以修改成其它颜色*/
  background: linear-gradient(to right, #1ecec2, #1ad17a);   
} 

————————————————
版权声明：本文为CSDN博主「风茫」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_46032105/article/details/125453568