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.

See the Pen Popup with box shadow and arrow by Martyn Chamberlin (@martynchamberlin) on CodePen.

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.

See the Pen CSS Popup Container w/Shadow by Billow Labs (@billowlabs) on CodePen.

Either of these methods is better than using a graphic.