質問

には、さまざまなCSSシェイプがあります。 CSSトリック - CSSの形状 で、特に戸惑うのが三角形。

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div id="triangle-up"></div>

どのように、そしてなぜ機能するのか？

解決方法は？

CSSトライアングル 5幕の悲劇

として alex さんのコメント 同じ幅のボーダーは45度の角度で互いに突き合わされます。

上部のボーダーがない場合は、このようになります。

そして、幅を0にすると...。

...そして、高さ0...

...そして最後に、2つのサイドボーダーを透明にするのです。

その結果、三角形になる。