html - 使用CSS创建半垂直椭圆

Question

我正在尝试使用 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;
}

我想要锐利的边缘，就像完整的椭圆形一样。我怎样才能达到同样的效果

Answer 1

像这样:

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

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

    position: relative;
}

注意:我已经独立设置 Angular 的属性，如文章中所述:Border-radius: create rounded corners with CSS! .

参见 Demo .