CSS 圆角元素在 IE11 中失败

Question

我基本上是在尝试做一个 "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

Answer 1

它不起作用，因为你的 div 尺寸是 0: width: 0;高度：0；

Answer 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 中但未测试）

Answer 3

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

尝试以下操作：

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>

Answer 4

大可不必这样。使用 border-radius（支持 here）。另外你的不是正方形，这是。

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

<div></div>

CSS 圆角元素在 IE11 中失败

CSS rounded corner element fails in IE11

html

css

internet-explorer-11

css-shapes