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

Question

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

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

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

Answer 1

要在三 Angular 形上获得圆 Angular 边框，您可能必须声明所有边框:

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