Arrow in Bottom of jQuery Dialog

css, jquery, jquery-dialog

Solution

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>`

Problem

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 ?

Original source

Related problems