πŸ’‘ 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 β€’ Last updated 2021 July 19 β€’ Read time 2 min read
  • twitter
  • facebook
CSS

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

Copied to clipboard! Playground
.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

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

Copied to clipboard! Playground
.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

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

Copied to clipboard! Playground
.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
How to Easily Create Arrows in CSS
If you would like to see more Webtips, follow @flowforfrank

Resource

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.