Arrow in Bottom of jQuery Dialog

Question

I'm using jQuery Dialog and i need to show an arrow tip on bottom center of jQuery Dialog like below.

How can i do this ?

Answer 1

One idea is to use the ::after and ::before pseudo-elements to place 2 CSS triangles (see How do CSS triangles work?) over the top of each other, one white and one grey in order to create a triangle outline. Also need to allow the shapes to be visible "outside" of the .ui-dialog so I added overflow:visible; to that selector - 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: This is similar to how it is done in Google Calendar, but instead Google use 2 x <div>

Answer 2

You could either use CSS3 to create a 45 degrees rotated squared or a png image with a rotated square int it.

In both case you would place it in absolute position to stick it to the bottom.

For the CSS3 option, use bottom: -Npx; where N is (side * sqrt(2) / 2) and same for the left:

For the image option, use half the width/height instead of that calculation.

Answer 3

You can copy one of these, and use them as text in your code, and then position the in the center. : Ʌ, ˄, ᴧ, ↑, ▲

(Make sure to the encoding of your editor is UTF-8)

If you need more characters, you can find them in the character map, if you are using windows.