πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Easily Create Arrows in CSS

How to Easily Create Arrows in CSS

Ferenc Almasi β€’ πŸ”„ 2021 July 19 β€’ πŸ“– 2 min read

You can tweak around with the border property and transform in CSS to create chevrons:

.arrow {
    display: inline-block;
    border: solid #FCA101;
    border-width: 0 3px 3px 0;
    padding: 3px;
}

.arrow--up    { transform: rotate(-135deg); }
.arrow--down  { transform: rotate(45deg); }
.arrow--left  { transform: rotate(135deg); }
.arrow--right { transform: rotate(-45deg); }
arrows.css
Copied to clipboard!

You can also turn the above example into triangles by changing the border property around a bit:

.triangle-up {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #FCA101;
}

.triangle-down {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #FCA101;
}

.triangle-left {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #FCA101;
}

.triangle-right {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #FCA101;
}
triangles.css
Copied to clipboard!

By also combining the above examples with some transforms, you can achieve diagonal triangles:

.diagonal-triangle {
    /* Make sure your element is block level. Otherwise you can't transform it. */
    display: inline-block;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #FCA101;
    transform: rotate(45deg);
}
triangles.css
Copied to clipboard!
How to Easily Create Arrows in CSS
If you would like to see more Webtips, follow @flowforfrank
Looking to improve your skills? Master CSS from start to finish.
Master CSS

Resource

Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access exclusive interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Remove ads to learn without distractions
Become a Pro

Courses

Recommended