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;

我得到了这个 this：

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

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

2) 是否有简单的解决方法？

编辑：

我正在使用Chrome，但我刚刚查看了Firefox和IE，结果不同！

Firefox：

IE 11

发生了什么？

- Danield

---

你尝试过将整个三角形放在一个具有“边框半径+溢出隐藏”的父div中吗？就像这样：http://jsfiddle.net/uvVgJ/ - Ali Bassam

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/

- dfsq

---

当然可以，但这并没有回答第一个问题。 - Hashem Qolami

@HashemQolami 我认为它发生的原因是因为在这种情况下的行为规范没有被定义（至少我不知道），所以这取决于浏览器供应商的具体实现。 - dfsq

@dfsq - 每个浏览器产生的不同结果似乎支持了你的说法，即此处的结果未在规范中定义。 - Danield

@dfsq 同意。似乎只有 Firefox 正确地呈现了该框，因为没有右边和底部的边框需要被圆角化。 - Hashem Qolami

阅读规范让我感觉，当边框宽度值本身大于半径时，没有半径实际上是很自然的。 - dfsq