反转顶部圆角边框以创建碗效果

Question

我有一个带圆角的div，但我想颠倒这些圆角以创造一个碗效果。

以下是我目前的情况：

html{
  background:red;
}

#test {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  background: blue;
}

<div id="test"></div>

相反，我希望它看起来像：

这对CSS来说是否可能？

更新

如果尚未清楚，“红色”用于说明页面正文的其余部分，并且需要透明

Answer 1

将top更改为bottom。

border- bottom -left-radius：50％; border- bottom -right-radius：50％;

修改

然后查看Fiddle。

Answer 2

创建一个伪元素并将其旋转180度。

html {
  background: red;
}

#test {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: blue;
}

#test::before {
  content: "";
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  background: red;
  position: absolute;
  top: 0px;
  height: 100px;
  width: 100%;
  transform: rotate(180deg);
}

<强> Working Fiddle