How to Easily Create Arrows in CSS

.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); }

.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;
}

.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);
}