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;
}

注意：我已经按照文章中的说明独立设置了角落的属性：Border-radius: create rounded corners with CSS!。

请参阅Demo。

Answer 2

似乎你无法使用百分比来实现（至少现在不是这样），但只要你知道你的尺寸，你就可以了。你可以这样做： jsFiddle

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

W3C规范。表示border-radius: 100%应该按照您的喜好工作但不包含在Chrome W3C spec.

中

Answer 3

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

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

使用css创建半垂直椭圆

3 个答案: