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 ?
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 ?
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>
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.
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.