div+css は三角形の arrow_html/css_WEB-ITnose を持つプロンプト ボックスを実装します

三角形の矢印が付いたプロンプト ボックスは以下のとおりです:

これはプロンプト ボックスです

通常、便利で速いため、上の小さな三角形を実現するには画像を使用しますが、画像うまく処理されています。 良くありません。乱雑に見え、視覚に影響を与えるため、別の方法で解決してください。

まず、CSS が三角形を実装する方法を学びましょう。

指定された幅と高さが 100 ピクセル、境界線が 50 ピクセルのボックス (div) があるとします。次のようになります (より直感的にするために、境界線には 4 つの異なる色が与えられています) ):

次に、ボックスの高さを 0 に設定します:

次に、幅を 0 に設定します:

IE6 のバグにより、プロトタイプはすでに出ています (高さ 0 の div は、特定のデフォルトの高さがあります)、私のコンピューターでの測定結果は 19 ピクセルです)、いくつかの小さな調整を行い、overflow:hidden を div に追加する必要があります。そうすれば、IE6 はそれを正しく解析できます。

次のステップは、残りの 3 つの境界線を削除することです。例として上向きの矢印を考えます。矢印を上向きにしたい場合は、左、上、右の境界線の色を削除する必要があります。一般的な方法は、これら 3 つの境界線の色を透明、つまり透明属性に設定することです。

border-color:transparent transparent #056F61

設定後、以下の効果が確認できます:

このようにして、CSSで作成された三角形が完成します。作業はほぼ終了したようですが、ブラウザの互換性をテストする必要があります。テスト後、IE6 を開くと、次のような結果になります。

トラブルシューティング 問題がどこにあるのかを調べたところ、IE6 が透明属性をサポートしていないことがわかりました。どうすればよいですか?これまでに多くの作業が行われてきたため、それを IE6 に落とすわけにはいきません。

そこで、IE6 で透明をサポートする方法をインターネットで調べたところ、フィルターを使用する必要があることがわかりました。ただし、この解決策は間違いなく機能しません。フィルターを使用したい場合は、画像を直接使用することをお勧めします。さらに調査した結果、

残り 3 つのエッジの属性を実線から点線または破線に変更しても問題ないことがわかりました。

/*border-style:solid*/border-style:dotted dotted solid;border-width:50px;border-color:transparent transparent #056f61; 

IE6 は透明属性を「サポート」しているようです。なぜそうなるのでしょうか?これはまだわかりません。テストの結果、ボックスの境界線の種類が破線に設定されている場合、IE6 で奇妙な動作が発生することが判明しました:

ボックスの幅と高さが 100 ピクセルの場合、境界線の幅は 34 ピクセルですタイプが破線の場合、境界線は消え、33 ピクセルに設定すると再び表示されます。この比率は確かです。

これは、IE6 で境界線の種類を破線に変更すると「通常」と表示される理由を説明している可能性があります。

枠線の種類が点線の場合、IE6 は次のように表示されます。

ボックスの幅と高さを 0 に設定すると、黒点が消え、このとき IE6 も「標準」と表示されます。

IE6 の解析に問題がある可能性がありますが、透明をサポートしていないバグは最終的に「解決」されました。

次の作業は非常に簡単です。プロンプト ボックスと同じ背景で同じ方法で三角形を作成し、横に 1 ピクセルだけ残して前の三角形に重ねて、プロンプト ボックス上に配置します。

必要に応じて、左、右、下の三角形を作成できます。

上記は個人的な経験ですので、間違いがあればご指摘ください。

ソースコード: 三角矢印付きのプロンプトボックス

--------------------------------

転載元。