CSS 互換ツールチッププロンプトボックス Method_html/css

CSS 互換ツールチッププロンプトボックス Method_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:42:00

オリジナル

1362 人が閲覧しました

最終レンダリング:

基本原理

最初に共通の div ボックスを背景色で設定し、次に前の投稿で取得した三角形のアイコンを使用して div ボックスを相対位置モードに設定し、三角形のアイコンを絶対位置に設定します。配置では、位置は div ボックスを基準にして適切な位置に調整されます。これにより基本的なツールチップが表示されますが、境界線がないと常に不快に見えます。div ボックスの境界線を設定することは難しくありませんが、三角形のアイコンの境界線を設定するにはどうすればよいでしょうか。ここでは、色の異なる 2 つの三角形のアイコンを 1 ピクセルずつずらして重ね合わせ、重ね合わせると、下の三角形の上の境界線が覆われ、左右の境界線の部分だけが露出するという巧妙な方法を使用しています。境界線アイコンのような三角形を取得します。

ステップバイステップ

1. まず、相対的に配置されたボックス div を定義します:

<div class="tooltips"> </div>

ログイン後にコピー

css:

  .tooltips{ position:relative; width:300px; height:80px; line-height:60px; background:#D7E7FC; border-radius:4px; }

ログイン後にコピー

Effect:

2. 次に、前の投稿の知識を使用して、 div ボックス三角形のアイコン:

    <div class="tooltips"> <div class="arrow "></div> </div>

ログイン後にコピー

三角形のアイコン CSS:

.arrow{ position:absolute; color: #D7E7FC; width: 0px; height:0px; line-height: 0px; border-width: 20px 15px 0; border-style: solid dashed dashed dashed; border-left-color: transparent; border-right-color: transparent; bottom: -20px; right: 50%; }

ログイン後にコピー

効果:

は形になり始めており、直接使用することもできますが、ツールチップの背景色がターゲットの背景色と一致する場合、区別するのは難しいので、境界線を定義する必要があります。

3. 境界線を追加します
css:

.tooltips{ position:relative; width:300px; height:80px; line-height:60px; background:#D7E7FC; border:1px solid #A5C4EC; border-radius:4px; }

ログイン後にコピー

効果:

ボックスには境界線の効果がありますが、下の小さな三角形は「保護」されていません。これは乙女座には耐えられません。

4. 「小さな三角形」にゴムバンドを付けます
原理を説明するときに、2 つの三角形を重ね合わせる方法を使用する必要があるとすでに述べました。まず、1 つは同じ背景色を持つ 2 つの三角形 div を定義します。ボックスの境界線の色、ボックスの背景色と一致する背景色:

    <div class="tooltips"> <div class="arrow arrow-border"></div> <div class="arrow arrow-bg"></div> </div>

ログイン後にコピー

css は次のように定義されます:

.arrow{ position:absolute; width: 0px; height:0px; line-height: 0px; border-width: 20px 15px 0; border-style: solid dashed dashed dashed; border-left-color: transparent; border-right-color: transparent; } .arrow-border{ color: #A5C4EC; bottom: -20px; right: 50%; } .arrow-bg{ color: #D7E7FC; bottom: -19px; right: 50%; }

ログイン後にコピー

注: .arrow-bg と .arrow-bg の下部の位置の違い。 arrow-border は 1px (境界線の幅に応じて調整可能)、div の順序を逆にすることはできません。
最終的な効果を見てみましょう:

OK! これで完了です。IE6 で実行してください。完全に互換性があります。