CSS での三角形の描画と巧妙な応用例の詳細な説明

鉛

Web ページ上の一般的な三角形の一部は、画像やフォント アイコンにする必要なく、CSS を使用して直接描画できます。 Xiaomiの公式ウェブサイトに記載されている通り:

JDのウェブサイトから：

では、これらの三角形は CSS を通じてどのように実装されるのでしょうか?

三角形の実装

これを実現するには、div コンテナの幅と高さを 0 に設定し、コンテナの境界線を設定します。

。箱 {
            高さ: 0;
            幅: 0;
            境界線の色: 小麦色 スカイブルー ピンク rgb(154, 121, 230);
            境界線のスタイル: solid;
            境界線の幅: 40px;
        }

上記のコードにより、次の効果が得られます。

上記のコードでは、ボックスの幅と高さは 0 に、境界線の色の値はそれぞれ上、右、下、左、境界線は実線、4 つの境界線の幅は 40px に設定されているため、4 つの二等辺直角三角形が生成されます。三角形のサイズは境界線の幅によって決まります。border-width の値が大きいほど、三角形も大きくなります。

三角形の 1 つだけが必要な場合は、他の境界線の色を透明に設定することで実現できます。以下の効果を実現します。

これを実現するには、border-top、border-bottom、border-left の色の値を transparent に設定します。

。箱 {
            高さ: 0;
            幅: 0;
            border-color: 透明 スカイブルー 透明 透明;
            境界線のスタイル: solid;
            境界線の幅: 40px;
        }

二等辺三角形が必要ない場合はどうすればよいでしょうか? それを実現するにはどうすればよいでしょうか?
前述の通り、三角形の大きさは border-width の値によって決まります。4方向の値を同じ値に設定しているので、結果は二等辺三角形になります。 border-width の値を変更することで、さまざまなサイズの直角三角形を作成できます。

。箱 {
            高さ: 0;
            幅: 0;
            border-color: 透明 スカイブルー 透明 透明;
            境界線のスタイル: solid;
            境界線の幅: 80px 40px 0 0;
        }

すると次の三角形が得られます。

小さな三角形の応用

三角形を描くだけでなく、位置の位置決めによっても実現できます。冒頭で述べたJD.comのウェブサイトでの価格表示の効果など。

このレンダリングの台形は、以下に示すように長方形の右側に直角三角形を配置し、三角形の背景色を白に設定することで実現できます。

もちろん、小さな三角形では疑似要素を使用して Web ページの構造を簡素化できますが、疑似要素はインライン要素であるため、最初にインライン ブロック要素またはブロックレベル要素に変換する必要があります。

要約する

CSS で三角形を描画する場合は、次の点に注意する必要があります。

• コンテナの幅と高さは0である必要があります
• 三角形のサイズは border-width の値によって決まります。

CSS で三角形を描画して巧みに適用する方法についての記事はこれで終わりです。CSS 三角形描画に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。