CSS圆角元素在IE11中失败答案

【问题标题】：CSS rounded corner element fails in IE11CSS圆角元素在IE11中失败
【发布时间】：2015-05-06 17:20:27
【问题描述】：

我基本上是在尝试做一个“CSS-triangle”（你知道，一个使用边框生成整个形状的元素）但是我想要一个左侧有圆角的正方形而不是三角形右侧的直角。

这在 Chrome 中运行良好，但 IE11 在左上角创建了一个奇怪的伪像。（圆角应该是背景色的椭圆形。真的很奇怪！）

有没有办法为 IE11 创建解决方法？

.RoundedElement {
  width: 0;
  height: 0;
  border-top: none;
  border-bottom: 50px solid transparent;
  border-right: 20px solid #00a2d4;
  position: relative;
  right: 20px;
  border-radius: 15px 0px 0px 15px;
 border-color: #F7A824;
}

http://codepen.io/anon/pen/QbjaOG

【问题讨论】：

有理由不简单地使用border-radius with a background 吗？
应该从ie9开始支持
它甚至在我身边的 FF 中也不起作用。
您分享的演示似乎不像您描述的那样使用 Chrome。你能分享一张想要的形状的截图吗？

标签： html css internet-explorer-11 css-shapes

【解决方案1】：

我认为你在这里把问题复杂化了。

尝试以下方法：

body { margin: 50px; }

.RoundedElement {
  width: 30px;
  height: 50px;
  position: relative;
  right: 20px;
  border-radius: 15px 0px 0px 15px;
 background-color: #F7A824;
}

<div class="RoundedElement">
</div>

为什么不使用默认的带有边框半径的常规background-color 呢？

如果您仍想使用border，请尝试以下操作：

body { margin: 50px; }

.RoundedElement {
  width: 20px; //Added 20px to fix in FF.
  height: 0px;
  border-top:30px solid transparent;
  border-bottom: 30px solid transparent;
  border-right: 40px solid #00a2d4;
  position: relative;
  border-radius: 15px 0px 0px 15px;
  border-color: #F7A824;
}

<div class="RoundedElement">
</div>

【讨论】：

最终选择了这个答案，因为它最接近我原来的 css 和最接近我原来的想法。

【解决方案2】：

将代码调整为：

body { margin: 50px; }

.RoundedElement {
  width: 10px;
  height: 0;
  border-top:30px solid transparent;
  border-bottom: 30px solid transparent;
  border-right: 10px solid #00a2d4;
  position: relative;
  right: 20px;
  border-radius: 15px 0px 0px 15px;
  border-color: #F7A824;
  z-index:2
}

pen

在 FF 中工作（也应该在 ie 中但未测试）

【讨论】：

【解决方案3】：

没有必要这样做。使用border-radius（支持here）。而且你所拥有的不是正方形，这是。

div {
  width: 100px;
  height: 100px;
  border-radius: 50% 0px 0px 50%;
  background: #000;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

它不起作用，因为您的 div 大小为 0: width: 0;高度：0；

【讨论】：

您指出了问题的原因，您没有提供解决方法。您应该改进解释如何执行此操作的答案。
这个答案也是错误的。元素可以是 0x0，因为边框是工作的对象，
@Ruddy - 完全正确。我最初的想法是让边框完成所有工作，所以我希望元素可以是 0x0