したがって、タスクは、CSSの矢印で美しいツールチップを作成することです。
写真付きのオプションについては考慮しません。疑似要素：beforeおよびafterを使用します。
最近、そのような技術は、CSS変換を使用して、ここですでに検討されています。
http://habrahabr.ru/blogs/css/136061/
別の方法をお勧めします-文字を使用します。
記事の元のバージョンでは、►、◄、▲、▼の記号の使用を検討していましたが、 FTDeBUGgeRが正しく述べているように、Androidではすべてが崩れました。 この問題は一般的なものであることが判明しました。Androidのフォントでは、矢印が左（►）および右（◄）になっていないだけです。
後退する場所がなかったため、Androidにもある矢印↑、↓、→、←を使用することにしました。 しかし、その後、突然、タンバリンが腕に現れました-結局のところ、このシンボルはすべての方向の矢印に十分です！ さらに、↑、↓、→、および←の大きな矢印は実際には鋭くありません。Androidでは一般に端が丸くなっています。
したがって、「ダイヤモンド」ツールチップを描画します。
はじめに、美しいグラデーションの背景、境界線、影を使ってツールチップブロック自体を作成しましょう。
font-size: 12px; color:#FFF; position:relative; width:300px; padding:20px; margin:20px; border: 1px solid #186F8F; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; background-color:#35acd7; background-image: -moz-linear-gradient( #29A2CE 0%, #3ABAE6 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #29A2CE), color-stop(100%, #3ABAE6)); background-image: -webkit-linear-gradient( #29A2CE 0%, #3ABAE6 100%); background-image: -o-linear-gradient( #29A2CE 0%, #3ABAE6 100%); background-image: -ms-linear-gradient( #29A2CE 0%, #3ABAE6 100%); background-image: linear-gradient( #29A2CE 0%, #3ABAE6 100%); -moz-box-shadow: 0 1px 0 #7FD2F1 inset, 0 0 7px 4px #666; -webkit-box-shadow: 0 1px 0 #7FD2F1 inset, 0 0 7px 4px #666; box-shadow: 0 1px 0 #7FD2F1 inset, 0 0 7px 4px #666;
この例では、2つのCSSクラスを使用します。一般的なプロパティには 'tooltip'を使用し、明確にするために、たとえば 'leftArrow'などの異なる方向の別々の矢印クラスを使用します。
<div class="tooltip leftArrow"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis, felis a volutpat semper, leo erat sollicitudin tortor, eget vulputate elit erat sed eros. Donec diam nibh, mollis sit amet molestie vel, condimentum ut justo. Duis congue justo non enim ornare sed dapibus sapien elementum. Proin mollis tellus sit amet nibh luctus condimentum. Ut viverra orci nec erat feugiat vitae dictum neque aliquet. </div>
次に、矢印を追加します。 擬似要素には、表示する16番目の文字コードを持つコンテンツプロパティがあります。
ブロックに境界線を使用しているので、境界線と矢印が見えるのは論理的で視覚的に便利です。 ただし、境界線はブロックにのみ掛けることができますが、テキストには掛けることができません。 したがって、矢印の付いた2つの擬似要素があります。前と後：最初の矢印は境界線の色を持ち、2番目は背景色を持ちます。 「境界線」に対する「背景」矢印のオフセットを使用すると、境界線を模倣できます。 矢印の影は、 "border"矢印（：before）のtext-shadowを介して形成されます。
境界線のないブロックが必要な場合、タスクは単純化され、1つの疑似要素を使用するだけで十分です。たとえば、:: before。
ユーザー選択によるテキスト矢印の選択も禁止します。
.tooltip:before, .tooltip:after { content:"\2666"; font-family: monospace; font-size:50px; line-height:52px; text-align:center; position:absolute; overflow:hidden; width:50px; height:50px; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; } .tooltip:before { color:#186F8F; } .tooltip:after { color:#35acd7; }
シンボル自体は50x50ピクセルのブロックの中央にあり、clipプロパティを使用して、シンボルの一部を切り取り、それにより目的の方向の三角形の矢印ブロックを形成します。
主な難点は、擬似要素の絶対座標を決定することですが、FireBugでは、font-sizeを使用して必要な矢印サイズをすばやく選択し、要素を配置できます。 ブロックの境界線を覆うように「背景」矢印を移動することが重要です。
また、エッジの中央に矢印を置く必要があることに同意します。 これを行うには、ブロックの高さまたは幅の半分の負のマージンと同様に、上部または左側の配置の50％を使用します。
ちなみに、元のバージョンでは、サイズの単位としてpxではなくemを使用していましたが、Operaを愛するすべての人がemのクリップを理解することを拒否したため、pxを使用する必要がありました。
ここでは、左矢印の作成について説明します。記事の最後に、4つの矢印オプションすべて（左、右、下、上）の例へのリンクがあります。
.leftArrow:before, .leftArrow:after { top:50%; left:-25px; margin-top:-25px; clip:rect(0px, 25px, 50px, 0px); } .leftArrow:before { -moz-text-shadow: -4px 0px 6px #666; -webkit-text-shadow:-4px 0px 6px #666; text-shadow: -4px 0px 6px #666; } .leftArrow:after { left:-24px; }
実際のところ、それだけです。「ダイヤモンドの切り札のツールチップ」に会います。
IEの場合、PIEを追加するだけで、美しさ（丸い角、影、グラデーションの背景）を確認できます。
マイナスがありました-ツールチップの背景の垂直方向のグラデーションは左右の矢印に表示できませんが、これは常に目立つわけではありませんが、マイナスではなく単調な背景色のツールチップに表示されます。
サンプルのデモと完全なソースコード