Strzałka w dolnej części okna dialogowego jQuery

Question

Używam jQuery Dialog i muszę pokazać końcówkę strzałki na dole środka jQuery Dialog, jak poniżej.

Jak mogę to zrobić?

Answer 1

Jednym z pomysłów jest, aby korzystać z pseudo-elementy ::after i ::before umieścić 2 trójkąty CSS (patrz How do CSS triangles work?) na górze każdego innego, jeden biały i jeden szary w celu stworzenia zarysu trójkąta. Należy również umożliwić wyświetlanie kształtów "na zewnątrz" obiektu .ui-dialog, dlatego dodałem overflow:visible; do tego selektora - 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; 
} 

Uwaga: Jest to podobne do tego, jak to się robi w Kalendarzu Google, ale zamiast używać Google 2 x <div>

Answer 2

Można użyć CSS3 do utworzenia kwadratu obróconego o 45 stopni lub obrazu png z obróconym kwadratem.

W obu przypadkach należy ustawić go w pozycji absolutnej, aby przykleić go do spodu.

Dla opcji CSS3 użyciu bottom: -Npx; gdzie N oznacza (strona * sqrt (2)/2), i to samo dla left:

dla opcji obrazu jedynie połowę szerokości/wysokości, zamiast tego obliczenia.

Answer 3

Możesz skopiować jeden z nich i użyć ich jako tekstu w kodzie, a następnie umieścić w środku. : Ʌ,, ᴧ, ↑, ▲

(Upewnij się do kodowania edytor jest UTF-8)

Jeśli potrzebujesz więcej znaków, można je znaleźć na mapie znaków, jeśli jesteś za pomocą okien.