Html 反转顶部圆形边框以创建碗状效果

我有一个圆角的div，但我想反转这些圆角以创建碗状效果

以下是我目前拥有的：

html{
背景：红色；
}
#试验{
位置：绝对位置；
底部：0；
左：0；
右：0；
高度：150像素；
边界左上半径：50%；
边界右上角半径：50%；
背景：蓝色；
}

---

将

顶部

更改为

底部

边界左下半径：50%； 边框右下半径：50%

编辑：

---

请参见。创建一个伪元素并将其旋转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);
}

---

遗憾的是，这不是我想要的。。。我试图从一个div中“冲压”出一个碗形。这不能通过简单地将边框半径更改为边框底部等来实现。外部div是否必须是

html

？如果没有，则制作两个高度相同的

div

s。嗯？？？你什么意思？

html{…}

您选择的是html标记。应该很清楚，html表示页面正文的其余部分，即它是透明的，因此添加边框底部半径将完全无效。将边框底部半径设置为红色容器而不是蓝色容器。您的意思是：您想要一个透明的碗状容器吗“断流“？副本显示了相反的情况。你在找那种东西吗？这正是我一直在寻找的那种东西，某种操纵伪类的聪明方法。然而，有一件事让这更难，那就是红色实际上代表了透明度。所以，实际上，我想做的是在蓝色的沙发上打一个碗形。这可能吗？@BenCarey AFAIK，有我提到的所有愚蠢的把戏。我建议你和SVG一起去。它们简单明了。SVG是一个很好的选择。否则，使用两个元素或伪元素可能是最好的选择。该规范并不真正支持您正在尝试做的事情，因此需要一些黑客css backflip。