如何获得border-radius以在底部生成顶部和方形角的椭圆半径

Question

我喜欢带有拱形顶部和正方形（或略微圆角）底部的CSS div。

这是我的CSS：

  #oval {
    width: 200px;
    height: 500px;
    background: red;
    border-radius: 80px/20px 5px;
  }

我也试过80px/20px 80px/20px 5px 5px没有运气，还有一堆其他组合。我一直在Firefox中测试。

任何帮助都会摇滚！

Answer 1

你可以试试这个：

border-radius: 80px 80px 5px 5px / 20px 20px 5px 5px;

Answer 2

尝试像这样单独构建每个角落

  .oval {
    width: 200px;
    height: 500px;
    background: red;

border-top-left-radius:200px;
border-top-right-radius:200px;
border-bottom-right-radius:0;
border-bottom-left-radius:0;

    //border-radius: 80px/20px 5px;
  }

Answer 3

好的，这是规则：border-radius: 85% 85% 5px 5px / 15% 15% 5px 5px;

显然，您指定四个角的所有水平半径，然后指定所有垂直半径