各種ブラウザに対応したCSS三角アイコン_html/css_WEB-ITnose

CSS は、さまざまなブラウザの三角形アイコンと互換性があります

現在人気のある Web サイトでは、小さな三角形のドロップダウン プロンプトがよく見られます (Weibo の上部にあるドロップダウン メニュー)。簡単な方法は次のとおりです。しかし、フロントエンド テクノロジの発展とフロントエンドのパフォーマンスに関する開発者の「細かい指摘」により、ますます多くのフロントエンド開発者が「本来の性質に戻り」、次のようなシナリオでの画像の使用を減らし始めています。画像は使用できません。画像と比較して、アイコンのサイズや色を簡単にカスタマイズできることも利点です。

CSS を使用した三角形アイコンの実装は新しい技術ではありません。これまでに関連する技術記事が多数ありました。この記事では主に、実際のシナリオで使用するときに発生する問題と、それらの問題を回避する方法を分析します。
基本原理は同様です。ここでは主に CSS ボーダーの使用方法を紹介します (もちろん、CSS3 の回転テクノロジーも使用できますが、互換性の問題のためここでは説明しません)。

CSS ボーダーの実装

div や要素のボーダーは、私たちの直感的な意味での高さのある線ではなく、同じ高さの台形または三角形 (幅と高さが 0 の場合) で見ることができます。効果:
div 定義 :

<div class="arrow1"></div>

css:

.arrow1{ width: 0px; height:0px; border-width: 30px; border-style: solid; border-color: #007998 #47A447 #3C6AB9 #D2322D; }

最終効果:

各方向の境界線が三角形であることがわかります。その後、残りの方向の境界線を設定するだけで済みます。対応する方向を透明にしたり、非表示にしたりすることで、任意の方向の三角形を取得できます。ドロップダウン アイコンを取得したい場合は、境界線の左右の境界線を透明に変更できます。 CSS の変更は次のとおりです:

.arrow1{ width: 0px; height:0px; border-width: 30px; border-style: solid; border-color: #007998 transparent transparent transparent; }

もう一度効果を見てみましょう:

注:透明属性は、背景の背景色オプションを設定するために使用されます。背景色を透明に設定するのが望ましい効果ですが、IE6 では混乱します。

長い黒い枠が直視しにくいのは、現時点では IE6 が透明属性をサポートしていないためです。境界線の幅を指定すると、該当する領域の境界線が非表示になります。とても大きいです。 CSS は次のように変更されます:

  .arrow1{ width: 0px; height:0px; border-width: 30px; border-style: solid; border-color: #007998 transparent transparent transparent; }

効果は次のとおりです (ie6 で表示):

ただし、まだ終わっていないので、最終的に生成された効果を確認するために影を設定します:

たとえ表示されていても三角形が必要ですが、三角形の占有高さは元の高さのままなので、他の要素と一緒に使用すると上に移動する効果が生じます。この時点で、下の境界線の高さを 0 に設定する必要があります:

  .arrow1{ width: 0px; height:0px; border-width: 30px 30px 0; border-style: solid; border-color: #007998 transparent transparent transparent; }

効果を見てみましょう:

はまだあまりフレンドリーではないようです。使用する場合は、対応する色を変更する必要があります。親要素に合わせて設定して、対応する色を表示するのはどうでしょうか？境界線の色を変更する必要があります:

.arrow1{ width: 0px; height:0px; line-height: 0px; border-width: 30px 30px 0; border-style: solid dashed dashed dashed; border-left-color: transparent; border-right-color: transparent; }

効果 (現在のフォントの色を使用):

もちろん、CSS 境界線の生成に加えて、特殊文字を使用して境界線を生成することもできます。または css3 Rotate を使用して生成します (IE6 でのハック処理が必要です)。境界線の使用は、一般的でシンプルで互換性のある方法です