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;}

  background: pink;}.container {

  margin: 0 auto;

  width: 500px;

  height: 200px;

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

  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%);}

  margin: 0 auto;

  width: 500px;

  height: 200px;

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

  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;}

  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);}