将border-radius应用于零宽度元素时，边框颜色会发生变化

Question

我在零宽度元素上使用border-top和border-left来创建三角形。

.triangle {
  border-top: solid 100px red;
  border-left: solid 100px blue;
  width: 0;
  margin: 10px;
}
.borderRadius { border-radius: 10px; }

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

但是，如果border-radius应用于元素，则红色边框变为蓝色!!请在此处查看JSfiddle：https://jsfiddle.net/brentonstrine/3z3gqwts/

这里发生了什么？有没有办法让我的三角形上有一个圆角？

Answer 1

要在三角形上获得圆角边框，您可能需要声明所有边框：

div {
  border-top: solid 50px red;
  border-right: solid 50px red;
  border-left: solid 50px blue;
  border-bottom: solid 50px blue;
  width: 10px;
  height: 10px;
}

DEMO