cross browser - border radius with css triangles -

i have a rectangle each side of diagonal has it's own color

enter image description here

div {     width: 0;     height: 0;         border-left: 150px solid green;     border-top: 100px solid gray; }

now wanted add border-radius div, noticed works fine sides except bottom left.

so if add:

border-radius: 10px 10px 10px 0;

enter image description here

.. add bottom left border-radius, this:

enter image description here

1) why happen?

2) there easy fix?

edit:

i'm using chrome, looked firefox , ie , results different!

firefox:

enter image description here

ie 11

enter image description here

what's going on?

try add wrapping container:

<div class="wrap">     <div class="triangle"></div> </div>

with style:

.wrap {     display: inline-block;     overflow: hidden;     border-radius: 10px; }

overflow: hidden; should trick.

And