Html 使用css创建半垂直椭圆

我正在尝试使用css创建一个垂直的半椭圆形形状。 我使用下面的代码创建一个完整的垂直椭圆

#oval {
    width: 100px;
    height: 200px;
    background: red;
    -moz-border-radius: 50px / 100px;
    -webkit-border-radius: 50px / 100px;
    border-radius: 50px / 100px;
    position: relative;
}

但我想把它创建为这个椭圆形的唯一左侧部分（像一个“D”） 我尝试使用以下代码，但它给了我钝边

#oval2{
    height:200px;
    width:50px;
    border-radius: 0% 100% 100% 0%;
    -moz-border-radius: 0 100% 100% 0;
    -webkit-border-radius:  0 100% 100% 0;
    background:green;
}

我想要像全椭圆形一样的锋利边缘。我怎样才能做到同样的

像这样：

#oval {
    width: 50px;
    height: 200px;
    background: red;

    border-bottom-right-radius: 50px 100px;
    border-top-right-radius: 50px 100px;

    position: relative;
}

注意：我已经独立设置了角点的属性，如文章中所述：

---

请参阅。

似乎您无法使用百分比来实现这一点（至少目前不能），但只要您知道自己的维度，您就不会有问题。您可以这样做：

#oval2 {
    height:200px;
    width: 50px;
    border-top-right-radius: 50px 100px;
    border-bottom-right-radius: 50px 100px;
    background:green;
}

---

W3C规范指出，

边界半径：100%

应该可以按照您的意愿工作，但它在chrome中不起作用

使用以下代码，它将帮助您：

#oval2 {
    height:200px;
    width: 50px;
    border-top-right-radius: 50px 100px;
    border-bottom-right-radius: 50px 100px;
    background:green;
}

#oval {
width: 70px;
height: 100px;
background: red;
position: relative;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}