带有CSS三角形的边框半径

I have 一个矩形对角线的每一边都有自己的颜色

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

现在我想向 div 添加边框半径，但后来我注意到这对于除左下角以外的所有边都适用。

所以如果我添加：

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

I get this:

..但是一旦我添加了左下边框半径，我就得到了this:

1）为什么会发生这种情况？

2）有简单的解决办法吗？

Edit:

我使用的是Chrome，但我只查看了firefox和IE，结果是不同的！

Firefox:

IE 11

这是怎么回事？

尝试添加一个包装容器：

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

用这种风格：

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

overflow: hidden;应该可以解决问题。

Demo: http://jsfiddle.net/dfsq/9xDVj/8/