css - 将边框半径效果从垂直更改为水平不起作用

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 的形状。但是如果你检查这个 fiddle 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 度时水平/垂直半径值会切换。