How to make a CSS chevron

June 29, 2019, 12:41 p.m.

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 custom chevron our last resort is an old school png file.

There is another way to create chevron - plain CSS. Only few lines of code and we can use 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: basic 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 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.

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