CSS三角形的边框半径

Question

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

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

现在，我想向div添加边框半径，但是随后我注意到，除了左下角之外，这对所有面都适用。

因此，如果我添加：

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

我得到这个 ：

..但只要我添加左下角边框半径，我得到这个 ：

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/