How to Easily Create Arrows in CSS

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

Resource

Remove ads
Remove ads

๐Ÿ“š Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. โ˜•

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
๐ŸŽ‰ Thank you for subscribing to our newsletter. x 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.