PatientsLikeMe Tech Blog

Using Borders to Make Pure CSS Arrows

• 5 Comments
• Posted November 9th, 2010 by Adam Darowski
• Filed Under: design, markup and style
• Tags: arrow, border, css

In between creating awesome for PatientsLikeMe, Jeffrey and I built an app based on the Dribbble API called Liiikes. If you want to know more about Liiikes, you can check out the About page, my blog post, or Jeffrey’s announcing it. Today, we’re gonna talk about just one little design element.

Specifically, I want to talk about the arrow on this popup:

What I wanted to solve:

• Attach an arrow to an absolutely positioned box to anchor it to the draftee count.
• Don’t use images (since the entire app doesn’t use images).
• Needs to accept rGBA background color values (to get some subtle transparency—for this reason, rotating a square wouldn’t work because you’d see the overlap).

I happened to find this tutorial on making pure CSS triangles using borders. I thought, “oh snap, this could work!”

Basically, borders render like this:

If you suppress the content area, you suddenly get this:

You seeing what I’m seeing? Now make 3 of those borders transparent!

Blizzam! Now all you have to do is absolutely position it to align nicely with your popup, or whatever you’re attaching the arrow to.

For the Liiikes example, here’s the HTML. In this case, I used an empty div. If that makes you uncomfortable, I’m sure you can apply it to another element somewhere. You’re a smart kid.

<div class="arrow"></div>

div.arrow { 
  position: absolute; 
  top: 20px; 
  left: -40px; 
  border-top: 20px solid transparent; 
  border-bottom: 20px solid transparent; 
  border-right: 20px solid rgba(0,0,0,.85); 
  border-left: 20px solid transparent; 
}

Enjoy!