私はjQuery Dialogを使用しています。下の中心に矢印の先端をjQuery Dialog
のように表示する必要があります。Arrow in jQueryのダイアログ
私はこれをどのように行うことができますか?
私はjQuery Dialogを使用しています。下の中心に矢印の先端をjQuery Dialog
のように表示する必要があります。Arrow in jQueryのダイアログ
私はこれをどのように行うことができますか?
一つのアイデアは、三角形のアウトラインを作成するために、互いに、白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>
CSS3を使用して、45度回転された正方形または回転した正方形intを持つPNG画像を作成できます。
どちらの場合でも、絶対位置に置いて底面に貼り付けます。画像オプションのleft:
ためCSS3オプションの
、Nでありbottom: -Npx;
を使用(サイド*のSQRT(2)/ 2)と同じではなく、その計算の半分の幅/高さを使用します。
これらのいずれかをコピーしてコード内のテキストとして使用し、中央に配置することができます。 :あなたはより多くの文字が必要な場合がある場合Ʌ、ᴧ、↑、▲
(エディタのエンコーディングがUTF-8であることを確認してください)
、あなたは、文字マップでそれらを見つけることができます窓を使って
うわー2を使用します。優秀:) – Bishan
[タイトルバーを隠す]と[jQueryダイアログで閉じるボタンを表示]を知っていますか(http://stackoverflow.com/questions/17672445/hide-title-bar-and-show-close-button-in- jquery-dialog)? – Bishan
私も助けることができるかどうかわかります:-) – andyb