March 23, 2022
You can create an arrow with pure Tailwind CSS by adding these CSS classes to a div
:
h-0
and w-0
border-x-8
and border-x-transparent
border-b-8
and border-b-blue-600
This creates a small triangle in color blue-600
that looks like this:
You can swap out the blue-600
for any other color to change the color of the triangle.
To get a differently sized or proportioned arrow, you can tweak the widths of the borders, like this (note that the transparent border doesn’t need to be the same width as the colored one):
<div class="h-0 w-0 border-x-8 border-x-transparent border-b-[16px] border-b-blue-600"></div>
To get an arrow that points left or right, you can use border-y-8
and border-y-transparent
instead. Moving the visible border (in these examples, it’s border-b
) changes the direction in which the arrow points — the arrow always points away from the side with the border.
Why does this CSS trick work? Here’s a CodePen that demonstrates why it works.
Lastly, I’ve created a playground on Tailwind Play with some examples of triangles that you can try out.
Tufts Meal Plan Wrapped
Mar 2, 2024
Building an e-ink picture frame that displays an iCloud photo album
Jan 9, 2024
2023 in review
Jan 5, 2024
Subscribe to my newsletter for a monthly round-up of new blog posts and projects I’m working on!