Question

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

这在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

我认为你在这里解决了这个问题。

尝试以下方法：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 4

它不起作用，因为你的div大小为0：width：0;身高：0;

IE11中的CSS圆角元素失败

4 个答案: