☰

CSS 三角形はどのように機能しますか? 質問する

tag-icon • tag-icon css geometry polygon css-shapes
CSS 三角形はどのように機能しますか? 質問する

さまざまなCSSシェイプがここにあります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>

それはどのように、そしてなぜ機能するのでしょうか?

ベストアンサー1

CSS 三角形: 5 幕の悲劇

としてアレックスは言った同じ幅の境界線が 45 度の角度で互いに接します。

境界線は45度の角度で交わり、コンテンツは中央にある

上部の境界線がない場合は、次のようになります。

上枠なし

次に幅を 0 にします...

幅なし

...高さは0です...

高さもない

...最後に、両側の境界線を透明にします。

透明なサイドボーダー

その結果三角形になります。

おすすめ記事