html - CSSを使用して斜めのツールチップポインタ要素を作成するには?

Question

ツールチップに添付された、矢印として機能する角度の付いた要素を作成する方法を考えています。Google アカウントでこれが行われるのを見たので、スクリーンショットを添付しました。彼らはいくつかのspan要素でこれを達成しているようです。

彼らの HTML/CSS からどのようにそれを行ったのかわかりません...私の唯一のアイデアは、通常の div または画像で CSS3 回転を使用することですが、もっと基本的な方法があると思います。

誰でも私にヒントを与えることができますか？私は完全な解決策を探しているわけではありません。それにアプローチする方法に困惑しています。また、それはツールチップ自体ではなく、その角度の付いた要素に関するものです。

編集：これは関連する質問です。透明な境界線、境界半径、およびボックス シャドウを使用していますか?

Answer 1

画像または操作されたスパンを使用して作成できます.Facebookはスプライト画像を使用して作成し、GoogleとTwitterはスタイル付きスパンを使用して作成し、下部以外の境界線を透明にします. これはツイッターです：

これはチュートリアルです。