首页 文章

IE11中的CSS圆角元素失败

提问于
浏览 次
0

我基本上试图做一个“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

html css css3 internet-explorer-11 css-shapes

4 回答

  • 0

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

    请尝试以下方法：

    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>
    回复于
  • 0

    将代码调整为：

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

    回复于
  • 2

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

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

    <div></div>
    回复于
  • -1

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

    回复于

相关问题