在CSS中创建弯曲的三角形弧

是否有可能用CSS创建一个弯曲的弧形三角形的东西？ (看看蓝色区域).

我可以用一个白色的椭圆形div创建这个效果,另一个div坐在它上面是蓝色,所以它给出了弧形的错觉.然而这并不好,因为我需要弧形所在的透明度,而不是白色椭圆形所阻挡的白色区域.

我想要创建整个或者一半我可以彼此相邻设置以构成一个整体.

您可以添加具有父级宽度和预定义高度的伪元素.

在此,设置border-radius 50％使其成为椭圆形,并添加一个向上的阴影将获得您的形状.

基本元素需要隐藏溢出以将阴影保持在矩形内

div {
  background-image: linear-gradient(black, black);
  background-size: 100% 30px;
  background-repeat: no-repeat;
  height: 30px;
  position: relative;
  overflow: hidden;
  padding-bottom: 80px;
}

div::after {
  content: '';
  height: 160px;
  width: 100%;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0px -80px 0px 100px blue;
  top: 30px;
  z-index: -1;
}

<div></div>