One of things you’ll often see around the web is a popup with a box shadow on it and an arrow connecting it to the triggering element that caused it to appear. It’s common (particularly on older sites) for developers to resort to grapics to solve this problem, but the fact of the matter is that this is a fully solvable problem with pure CSS.
The easiest way is by taking advantage of the
transform property. If you go about it this way, you can build your popup with just two DOM nodes. Here’s my method for achiving this.
Googling around, I found a second way of solving the problem, which is quite interesting. This solution requires 4 DOM nodes for the popup and it essentially creates two arrows, one for the box shadow and one for the actual arrow.
Either of these methods is better than using a graphic.