如何在CSS中制作斜椭圆？

Question

我正在尝试在CSS / HTML中创建一个倾斜的椭圆形，但有一些问题。

我尝试创建一个普通的椭圆，然后根据下面的代码旋转几度，但它只是旋转下面的矩形并在此后应用bordier半径。

以下是我的尝试：

.circle{
    width:100px;
    height:50px;
    border-radius:50px;
    background:#000;
    -webkit-transform: rotate(27deg);
}

Answer 1

您应使用亲戚border-radius，并将其设置为50％以获得完美的椭圆形。

然后，您可以尝试使用skew：

.circle{
    -webkit-transform: skew(27deg);
}

将渲染：

rotate将呈现此内容：

Answer 2

尝试使边框半径为50％（或500像素）

border-radius:50%;

编辑：为了改善我的答案，您发布的代码对于创建倾斜椭圆是正确的，除了边框半径不正确。它需要50％，因为它可以成为完美的角落，例如。一个圆圈。然后你只需使用宽度/高度来拉伸圆圈以获得椭圆形，然后使用transform:rotate(27deg);使其成为一个倾斜的椭圆形。

Answer 3

在这里工作，我只是放border-radius: 50%;

http://jsfiddle.net/4RkhW/