Pfeil unten in jQuery Dialog

Question

Ich benutze jQuery Dialog und ich muss eine Pfeilspitze unten Mitte jQuery Dialog wie unten zeigen.

Wie kann ich das tun?

Answer 1

Eine Idee ist, die ::after und ::before pseudo-Elemente zu verwenden CSS 2 Dreiecke zu platzieren (siehe How do CSS triangles work?) über der Oberseite der jeweils anderen, eine weiße und eine graue, um ein Dreieck Umriss zu erzeugen. Außerdem müssen die Formen sichtbar sein "außerhalb" der .ui-dialog, so fügte ich overflow:visible; zu diesem Selektor - 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; 
} 

Hinweis: Dies ist ähnlich, wie es in Google Kalender fertig ist, sondern Google verwendet 2 x <div>

Answer 2

Sie können entweder CSS3 verwenden, um ein um 45 Grad gedrehtes Quadrat- oder ein Png-Bild mit einem gedrehten Quadrat zu erstellen.

In beiden Fällen würden Sie es in der absoluten Position platzieren, um es auf den Boden zu kleben.

Für die CSS3 Option bottom: -Npx; verwenden, wobei N (side * sqrt (2)/2) und für die gleichen left:

Für die Bild Option verwenden, um die halbe Breite/Höhe anstelle dieser Berechnung.

Answer 3

Sie können eine davon kopieren und sie als Text in Ihrem Code verwenden und dann die Position in der Mitte positionieren. : Ʌ, ᴧ, ↑, ▲

(Machen Sie auf die Codierung Ihres Editors sicher ist UTF-8)

Wenn Sie mehr Zeichen benötigen, können Sie sie in der Zeichentabelle finden können, wenn Sie Verwenden von Fenstern.