Arrow in Bottom of jQuery Dialog

Question

Sto usando jQuery Dialog e ho bisogno di mostrare una punta di freccia in basso al centro di jQuery Dialog come di seguito.

Come posso fare questo?

Answer 1

Un'idea è quella di utilizzare gli pseudo-elementi ::after e ::before posizionare 2 triangoli CSS (vedi How do CSS triangles work?) sopra la parte superiore di ogni altro, uno bianco e uno grigio per creare un profilo triangolare. Inoltre, è necessario consentire che le forme siano visibili "all'esterno" di .ui-dialog, quindi ho aggiunto overflow:visible; a tale selettore - 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; 
} 

Nota: Questo è simile a come si è fatto in Google Calendar, ma invece di Google usano 2 x <div>

Answer 2

È possibile utilizzare CSS3 per creare un quadrato ruotato di 45 gradi o un'immagine png con un quadrato ruotato.

In entrambi i casi lo posizioneresti in posizione assoluta per attaccarlo al fondo.

Per l'opzione CSS3, utilizzare bottom: -Npx; dove N è (lato * sqrt (2)/2) e lo stesso per il left:

Per l'opzione immagine, utilizzare metà della larghezza/altezza invece di tale calcolo.

Answer 3

È possibile copiare uno di questi e utilizzarli come testo nel codice, quindi posizionarli al centro. : Ʌ,, ᴧ, ↑, ▲

(Assicurarsi di codifica del vostro editor è UTF-8)

Se avete bisogno di più personaggi, li potete trovare nella mappa dei caratteri, se usando Windows.