更改邊界半徑效果從垂直到水平不起作用

Question

我有一個border-radius效果，我想「旋轉」90度。

#a{ 
    height:55px; 
    width:70px; 
    border-radius:25px 25px 42px 42px/9px 9px 35px 35px; 
} 
#b{ 
    height:70px; 
    width:55px; 
    border-radius:42px 25px 25px 42px/9px 35px 35px 9px;  
} 

我想在垂直對齊的元素b上使用元素a的形狀。但是，如果你檢查這個小提琴http://jsfiddle.net/mVp29/2/你可以告訴它實際上使左邊緣完全筆直。發生了什麼以及如何解決這個問題。另外，我不想使用transform:rotate(90deg);，因爲它們是元素中的內容。

這似乎是發生在Firefox和IE瀏覽器，似乎是發生在我是否宣佈的像素或百分比值。

Answer 1

所以你想#a旋轉90度？嘗試：

逆時針：

#b { 
    height:70px; 
    width:55px; 
    border-radius: 9px 35px 35px 9px/25px 42px 42px 25px;  
} 

http://jsfiddle.net/mVp29/5/

順時針：

#b { 
    height:70px; 
    width:55px; 
    border-radius:35px 9px 9px 35px/42px 25px 25px 42px;  
} 

http://jsfiddle.net/mVp29/4/

這樣做的原因是因爲，水平/垂直半徑值被切換當你旋轉90 d級別Zurvan祖安。