如何在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/