How to make a CSS chevron

Sun 30 June 2019

Chevron is quite popular visual element used in all sort of sliders and buttons. The most popular way to implement chevron is to use font like Font Awesome or Glyphicons. The downside is that we have to settle with a given shape. If we need to use a custom chevron our last resort is a good old png file.

There is another way to create chevron - plain CSS. Only few lines of code, and we can have custom size, colour and shape. Let’s start with some HTML. All we need is a span (or any other element) with two classes assigned to it: base class and a direction.

<span class=“chevron chevron-left></span>

Now we need some CSS to style our “arrow”.

.chevron {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 2px solid #777;
    position: relative;
}

Width and height can be changed in order to meet our needs and border is optional.

Next we add little magic - pseudo element ::after to create an actual chevron.

.chevron::after {
    content: '';
    border-right: 2px solid #777;
    border-bottom: 2px solid #777;
    width: 50%;
    height: 50%;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
}

Like before we can change width and height. This time border is required, but we can adjust its width and colour.

The last step - direction. In above example we have used chevron-left class.

.chevron--left::after {
    -webkit-transform: translate(-30%, -50%) rotate(135deg);
    -ms-transform: translate(-30%, -50%) rotate(135deg);
    -o-transform: translate(-30%, -50%) rotate(135deg);
    transform: translate(-30%, -50%) rotate(135deg);
}

Bonus

What if we need slightly alter shape of our arrow? Well, we can add another transformation to our code and - if needed - adjust position. Yes, it’s that simple.

.chevron--left::after {
    -webkit-transform: translate(-30%, -50%) rotate(135deg) skew(-15deg, -15deg);
    -ms-transform: translate(-30%, -50%) rotate(135deg) skew(-15deg, -15deg);
    -o-transform: translate(-30%, -50%) rotate(135deg) skew(-15deg, -15deg);
    transform: translate(-30%, -50%) rotate(135deg) skew(-15deg, -15deg);
}