Почему этот фрагмент CSS рисует треугольник?

Я видел следующий код без комментариев.

.triangle {
    border-color: transparent;
    border-bottom-color: green;
    border-style: solid;
    border-width:  300px;
    border-top-width:0;
    height: 0;
    width: 0
}

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

Ответ 1

Уголки границы встречаются под углом 45 градусов.

Таким образом, показ только одной границы будет показывать суженные края, где одна сторона встречает следующий.

Сделав 3 из невидимых границ или того же цвета, что и фон, мы получим иллюзию треугольника.

.bdr1{
  height:100px;
  width:100px;
  display:block;
  border:25px solid;
  border-color:red blue green black;
 }
.bdr2{
  height:0;
  width:0;
  display:block;
  border:100px solid;
  border-color:red blue green black;
 }
.bdr3{
  height:0;
  width:0;
  display:block;
  border:100px solid;
  border-color:red white white white;
 }

<div class="bdr1"></div><br/>
<div class="bdr2"></div><br/>
<div class="bdr3"></div>

Ответ 2

Это потому, что все, что вы видите, это bottom-border-color. Левая и правая границы прозрачны, а верхняя граница не имеет ширины (border-top-width:0;).

Границы элементов встречаются под углом, рассчитанным на основе ширины двух границ. Поэтому, если границы имеют одинаковую ширину, угол составляет 45 градусов. Неравные ширины границ создадут другие углы.

Поскольку элемент .triangle не имеет ширины или высоты, эти углы сходятся в одной точке. Код ниже поможет продемонстрировать концепцию:

    .borders {
        border-bottom-color: green;
        border-left-color: red;
        border-right-color: blue;
        border-top-color: pink;
        border-style: solid;
        border-width:  50px;
        height: 50px;
        width: 50px;
    }

    .triangles {
        border-bottom-color: green;
        border-left-color: red;
        border-right-color: blue;
        border-top-color: pink;
        border-style: solid;
        border-width:  50px;
        height: 0;
        width: 0;
    }

    .triangle {
        border-color: transparent;
        border-bottom-color: green;
        border-style: solid;
        border-width:  50px;
        height: 0;
        width: 0;
    }

<div class="borders"></div>
<hr>
<div class="triangles"></div>
<hr>
<div class="triangle"></div>