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

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

这是怎么回事？

请您参考如下方法:

尝试添加包装容器:

<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/