古典的なCSS_html/css_WEB-ITnoseを使用した三角形アイコンの原理の分析

前書き:

この記事を書く前に、私もフロントエンドマスターが書いたコードをたくさん見てきましたが、それらはすべてコードを貼り付けて表示効果を与えるだけのもので、初心者にとっては誰もがそれを求めるのが好きです。なぜこれを行うのか? 次に、CSS での三角形の実装についての私の理解を共有しましょう:

border

4 つの境界設定

border-left

Set left Border、通常は

を使用して左の境界線スタイルを個別に設定します border-right

右の境界線を設定します、通常は右の境界線スタイルのみを単独で設定します

border-top

上の境界線を設定します、通常は上の境界線スタイルを個別に設定します

border-bottom

下の境界線を設定します。通常、下の境界線スタイルは CSS の下線効果として適用できます

基本的な使用方法:

よく使用される境界線:

// 为引用 class="border-four" 的盒子对象设置1px像素红色实线边框.border-four { border: 1px solid #ff0000; };//  同理，单独给左边框设置1px像素红色实线边框.border-left { border-left: 1px solid #ff0000; };//  同理，单独给右边框设置1px像素红色实线边框.border-right { border-right: 1px solid #ff0000; };//  同理，单独给上边框设置1px像素红色实线边框.border-top { border-top: 1px solid #ff0000; };//  同理，单独给底边框设置1px像素红色实线边框.border-bottom { border-bottom: 1px solid #ff0000; };

その他の境界線の値について詳しくは、W3C 境界線スタイルの 10 の属性値を参照してください

本題に入りましょう:

まず、通常のブロックに 4 つの異なる色の境界線を設定する効果を見てみましょう要素: 効果を明確にするために、すべての境界線の幅は 50 ピクセルです。

上の図の HTML と CSS コードは次のとおりです:

// 实线边框：solid.solid { border: 1px solid #ff0000; }// 虚线边框：dashed.dashed { border: 1px dashed #ff0000; }

<div class="test-border">我是居中内容</div>

4 つの境界線の位置範囲を覚えておいてください。これはとても重要です。

次に、コンテンツを削除するとどのような影響があるかを頭の中で想像してください。

HTML コードをもう一度添付します。CSS コードは何も変更せずに上記と同じです

.test-border {    border-top: 50px solid #ff0000;    border-bottom: 50px solid #00a000;    border-left: 50px solid #ff7f50;    border-right: 50px solid #436eee;    text-align: center;}

効果は次のとおりです:

思っていたものと違いますか?ここの div はブロックレベルの要素であるため、行を埋めることになります。次に、幅と高さを 0 に設定して、どのような効果が得られるか見てみましょう。 HTML および CSS コードとレンダリングを添付します。

<div class="test-border"></div>

<div class="test-border"></div>

ことわざにあるように、ルールはありません。 CSS コード仕様に関する書籍を作成する必要があります。Bootstrap CSS 記述仕様を参照して、今から始めることをお勧めします。

上記のレンダリングを見て、4 方向に矢印が付いた三角形を実現するのはそう遠くないと思います

上の図の下の境界線の色を透明に設定すると、 border-right: 50px 単色透明 ;

その効果は次のとおりです:

border-bottom を削除すると、CSS と がその効果を誰でも推測できると思います。したがって、text-align: center は冗長なので、そうする必要があります。削除されました。

はい、上の透明効果と比較してください。

三角の矢にまた一歩近づいたでしょうか？ここで、上下の境界線を一緒に削除すると、ただの右向きの三角矢印になるのではないかと思う人もいるかもしれません。間違って、間違って、間違って、重要なことは3回言います。かわいいので許してください。 上下の境界線を削除すると、ボックスモデルの高さは 0 になります。左側の境界線を上げることはできず、上下を移動することはできません。幅を 0 に設定するか、削除します。

もちろん、賢い友人の中には、上下の境界線を削除したらどうなるのかと言う人もいるでしょう。下のベゼルを外して試してみましょう。 CSS とエフェクトは次のとおりです。

.test-border {    width: 0;    height: 0;    border-top: 50px solid #ff0000;    border-bottom: 50px solid #00a000;    border-left: 50px solid #ff7f50;    border-right: 50px solid #436eee;    text-align: center;}

はい、エフェクトはこのようになります。待って、三角形の矢印が遠くにあるという現在のエフェクトは間違っていますか? ？ すでに？次に、境界線の底を削除せずにそれについて考え続けます。

どうすれば望む効果を達成できるでしょうか?上下の境界線を削除することはできません。上下の境界線を非表示にすることはできますか?その秘密はここにあります。 CSS のカラーには透明な属性値があることは誰もが知っています

上下の境界線の色を透明に設定するとどうなるでしょうか?ゆっくり想像してみると、効果は以下の通りです

.test-border {    width: 0;    height: 0;    border-top: 50px solid #ff0000;    border-bottom: 50px solid #00a000;    border-left: 50px solid #ff7f50;}

わぁ、これは私たちが夢に見た伝説の右向き三角矢印ではないでしょうか すごいですね、実際にやってしまいました。ここまで言いましたが、ショックを和らげるために水を飲ませてください。

ここで、CSS 三角形アイコンの原理の分析が終わりに近づいています。次に、残り 3 つの三角形の矢印の CSS コードとレンダリングを示します。

左矢印:

.test-border {    width: 0;    height: 0;    border-top: 50px solid #ff0000;    border-left: 50px solid #ff7f50;}

下矢印:

.test-border {    width: 0;    height: 0;    border-top: 50px solid transparent;    border-bottom: 50px solid transparent;    border-left: 50px solid #ff7f50;}

上矢印:

えー

それだけでとても嬉しいです。良い知識をお持ちでしたら、ぜひ皆さんと共有していただければと思います。何か間違っている場合は、修正してください。