边界半径与css三角形

Question

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

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

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

所以,如果我添加:

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

我明白了:

..但是一旦我添加了一个左下边界半径,我得到这个:

1)为什么会这样？

2)有一个简单的解决方案吗？

编辑:

我正在使用Chrome,但我只是看了一个火狐和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/