How to use and think about CSS arrows

Talasan Nicholson
Jul 20, 2017 · 1 min read

It’s not hard. Other tutorials make it sound all complex but don’t even boil it down for you. I’ll skip the ‘how’ — all that matters is how to think about it. The rest comes easy.

Even just looking at the CSS it may be obvious, but here’s the gestalt:

  • The border itself should be the size of the arrow that you want — 15px
  • The side that you want the arrow on will use the opposite border.
    ex: left arrow will use border-right-color
  • If you want the border to be centered, then you must offset it by its own size.

All borders naturally concave into each other:

You’re just hiding the ones that you don’t require.

)
Talasan Nicholson

Written by

Full stack web engineer.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade