边界半径与css三角形

Question

我有a rectangle，对角线的每一边都有自己的颜色

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

现在我想为div添加一个border-radius，但后来我发现除了左下角之外，这对所有边都有效。

所以，如果我添加：

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

我得到this：

..但是当我添加左下边界半径时，我得到this：

1）为什么会这样？

2）有一个简单的解决方法吗？

编辑：

我正在使用Chrome，但我只是看了一个firefox和IE，结果不一样了！

火狐：

IE 11

发生了什么事？

Answer 1

尝试添加包装容器：

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

这种风格：

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

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

演示：http://jsfiddle.net/dfsq/9xDVj/8/