css里面的底端,用CSS曲线底部的div到内部

只需使用边框半径并使元素溢出。您还可以依赖伪元素来避免额外的标记：.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;}

radial-gradient如果您想要透明形状，也可以使用：body {

background: pink;}.container {

margin: 0 auto;

width: 500px;

height: 200px;

background: radial-gradient(110% 50% at bottom, transparent 50%, lightblue 51%);}

这是另一种使用方式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%);}

您也可以考虑使用SVG：.container {

margin: 0 auto;

width: 500px;

height: 200px;

background: url("data:image/svg+xml,") top center/auto 700px no-repeat;}

如果您还想在形状周围添加边框，这是一个示例：.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;}

如果考虑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);}