CSS Arrow

Posted on Nov 06, 2025

by Jimmy

CSS

How to use CSS to create a simple arrow icon.

CSS
        
            .arrow-up {
    --arrow-size: 10px;
    
    width: 0; 
    height: 0; 
    border-left: var(--arrow-size) solid transparent;
    border-right: var(--arrow-size) solid transparent;
    border-bottom: var(--arrow-size) solid #000;
}        
    

Based on an article from CSS Tricks


Back to Snippets