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.

Answer 1

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.