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