Arrow in jQueryのダイアログ

Question

私はjQuery Dialogを使用しています。下の中心に矢印の先端をjQuery Dialogのように表示する必要があります。

私はこれをどのように行うことができますか？

Answer 1

一つのアイデアは、三角形のアウトラインを作成するために、互いに、白1つのずつ灰色の上（How do CSS triangles work?を参照）2つのCSS三角形を配置する::afterと::before擬似要素を使用することです。また、形状が.ui-dialogの「外側」に見えるようにする必要がありますので、see demoにoverflow:visible;を追加しました。

.ui-resizable-handle.ui-resizable-s::before, .ui-resizable-handle.ui-resizable-s::after { 
    content: ""; 
    width: 0; 
    height: 0; 
    position: absolute; 
    left: 150px; 
    border-style: solid; 
    border-width: 10px; 
} 

.ui-resizable-handle.ui-resizable-s::before { 
    border-color: #aaa transparent transparent transparent; 
    top: 2px; 
} 

.ui-resizable-handle.ui-resizable-s::after { 
    border-color: #fff transparent transparent transparent; 
    top: 1px; 
} 

.ui-dialog { 
    overflow:visible; 
} 

注：これは、それがGoogleカレンダーにどのように行われるかに似ていますが、代わりにGoogleは、X <div>

Answer 2

CSS3を使用して、45度回転された正方形または回転した正方形intを持つPNG画像を作成できます。

どちらの場合でも、絶対位置に置いて底面に貼り付けます。画像オプションのleft:

ためCSS3オプションの

、Nでありbottom: -Npx;を使用（サイド*のSQRT（2）/ 2）と同じではなく、その計算の半分の幅/高さを使用します。

Answer 3

これらのいずれかをコピーしてコード内のテキストとして使用し、中央に配置することができます。 ：あなたはより多くの文字が必要な場合がある場合Ʌ、ᴧ、↑、▲

（エディタのエンコーディングがUTF-8であることを確認してください）

、あなたは、文字マップでそれらを見つけることができます窓を使って