CSSのborderプロパティを使用して三角形を描画する方法

境界線を使用して三角形を描くのは、実際には奇妙なスキルです。

は境界線の機能を利用します。要素の幅と高さが両方とも0の場合、境界線の幅を設定します(少なくとも隣接する2つの境界線の幅を設定します)。境界線は要素を拡張します。 。

4つの境界線の幅を同時に設定すると、最終的に4つの辺が要素の中心の点に収束します。

したがって、幅と高さを指定して要素の境界線を設定すると、図に示すように、4 つの境界線が直角ではなく斜めに接続されます。 幅と高さを設定せずに、4 つの境界線に異なる色を設定すると、異なる色と異なる方向を持つ 4 つの三角形を取得できます。三角形の場合、別の境界線を設定することはできません。境界線を 1 つだけ設定すると、幅だけがあり高さのない単なる線になり、ページ上に表示できません

したがって、やはり 4 つの境界線を設定する必要があります。同時に、または隣接する 2 つの境界線を指定します 境界線の幅を設定し、境界線の 1 つに色を追加するだけです:

4 つの辺を設定します:

のみ2 つの隣接する辺を設定します:

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