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 achieving this. First, the HTML:

<div class="trigger">
  <p>Hello world</p>
  
  <div class="popup">
    <div class="inner">I am a popup</div>
  </div>
</div>

And then the CSS:

body {
  font-family: Helvetica;
  background: #ddd;
}

.trigger {
  margin: 150px auto 20px;
  width: 150px;
  position: relative;
  text-align: center;
}

.popup {
  position: absolute;
  left: 0;
  top: -60px;
  transform: translate3d(0, -50%, 0);
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  background: none;
  border-radius: 100px;
  width: 100%;
}

.popup:after {
  content: "";
  width: 20px;
  height: 20px;
  transform: rotate(-45deg);
  background: #fff;
  position: absolute;
  box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.5);
  z-index: -1;
  bottom: -10px;
  left: calc(50% - 10px);
}

.inner {
  padding: 30px 0;
  background: #fff;
  border-radius: 100px;
}

Here’s a demo of this on CodePen:

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.