IE11中CSS圆角元素失败

Question

I'm basically trying to do a "CSS-triangle" (you know, an element where the entire shape is generated using borders) but instead of a triangle shape, I want a square with rounded corners on the left side and straight corners on the right side.

This works fine in Chrome but IE11 creates a weird artefact at the top-left corner. (a background-colored oval right where the rounded corner should be. really strange!)

Is there a way to create a workaround for 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

I think you are over complicating the problem here.

Try the following:

 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> 

Why not use the regular background-color with border radius that works by default ?

If you still want to use border try the following:

 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 2

tweaking the code to:

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

works in FF (should also in ie but not tested)

Answer 3

There is no need to do it like this. Use border-radius (support here ). Also what you have is not a square, this is.

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

 <div></div> 

Answer 4

It not work because your div size is 0: width: 0; height: 0;