How to use and think about CSS arrows
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.
