純粋なCSSで三角形を描画する方法

CSS で三角形を描画する方法: 1. 幅と高さが 0 のラベル要素を定義します; 2. 「border-direction: 境界線の幅の実線の境界線の色」を使用して三角形の底辺を定義します。 3. 残りの3つを透明枠で設定するだけです。

このチュートリアルの動作環境: Windows7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

三角形の実装原則:

• 幅 (幅) は 0、高さは 0 です。 (高さ) ) は 0;

• 水平方向と垂直方向のエッジ (上下左右) がボーダー方向に設定されています: 長さは赤の実線で、これは直線です一番下にあります。他の辺にはボーダー方向を使用します: 長さは実線で透明です。

• 水平辺と垂直辺(上下左右)の設定が2つあり、斜辺が三角形の右側にある場合は、頂点の直線を設定します。または下、右の斜線。斜辺が三角形の左側にある場合は、上または下の直線と左の対角線を設定します。 ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃1アップ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ ＃

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

  
  

2. 下向き

##

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

推奨学習:

css ビデオ チュートリアル

#

以上が純粋なCSSで三角形を描画する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。