将border-radius效果从垂直变为水平不起作用

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度时会切换水平/垂直半径值。