How to make a CSS chevron

Chevron is quite popular visual element used as an arrow 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.

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

And that’s all. We have css only chevron. You can find full code here.

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

Browser compatibility.

Above example will work in all modern browsers and IE9+.