Arrow in Bottom of jQuery Dialog

Question

Comment puis-je faire cela?

Answer 1

Une idée est d'utiliser des pseudo-éléments ::after et ::before placer 2 triangles CSS (voir How do CSS triangles work?) au-dessus de l'autre, une blanche et une grise, afin de créer un contour en triangle. Aussi besoin de permettre aux formes d'être visibles "à l'extérieur" du .ui-dialog alors j'ai ajouté overflow:visible; à ce sélecteur - see demo.

.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; 
} 

Note: Ceci est similaire à la façon dont il est fait dans Google Agenda, mais au lieu d'utiliser Google 2 x <div>

Answer 2

Vous pouvez utiliser CSS3 pour créer un carré de 45 degrés ou une image png avec un carré pivoté. Dans les deux cas, vous le placez en position absolue pour le coller vers le bas.

Pour l'option CSS3, utiliser bottom: -Npx; où N est (côté * sqrt (2)/2) et de même pour le left:

Pour l'option de l'image, utiliser la moitié de la largeur/hauteur de la place de ce calcul.

Answer 3

Vous pouvez copier l'un d'entre eux et les utiliser comme texte dans votre code, puis positionner le au centre. : Ʌ,, ᴧ, ↑, ▲

(Assurez-vous de l'encodage de votre éditeur est UTF-8)

Si vous avez besoin de plus de caractères, vous pouvez les trouver dans la carte de caractère, si vous êtes en utilisant les fenêtres.