How To Create Arrow Shapes using CSS

Creating arrows or triangles using CSS3 is as simple as boiling water in the oven. You don’t have to be an expert cook to boil water, isn’t it? All you need to know is, how to turn on the oven and some common sense approach. Likewise, you don’t need to be an expert CSS designer to create shapes (arrows) in CSS3. Instead, you should know how CSS works behind the scene (browser). In this article, I will share you how to create arrows with different directions using only pure css.

Box Model in CSS

You might already be familiar with what i am going to talk about. Everything in CSS is a box. Whenever you style an element you are actually creating a box made of margin, padding and border.

The above image explains what will happen when the width and height of the element are set to 0 (width: 0; height: 0;). As a result of it, The borders come to meet each other to form a square shape. That’s all you need to know in order to create arrows or triangles using CSS. The trick for creating arrows is to add a border property to the opposite of where you want your arrow to focus. For instance, If you want to create a top arrow, you should add the border-bottom property (which is the opposite side of border-top) along with the two adjacent borders (i.e, border-left and border-right).

Create UP Arrow in CSS

<div class="arrow-up"></div>

.arrow-up {
  width: 0;
  height: 0;
  border-bottom: 35px solid #569cbd;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

I hope the above code makes sense. border-bottom is the only property that i have given color value so that it will be visible in the browser, the other two border properties colors are left to transparent in order to get the arrow effect towards the upside/top. The more extra pixels we add to the border-bottom width, the more sharpened the arrow shape is.

Create Down Arrow in CSS

<div class="arrow-down"></div>

.arrow-down {
    width: 0;
    height: 0;
    border-top: 35px solid #569cbd;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}

See, what i had replaced for the arrow-down class, border-top (which is the opposite side of the bottom) property is added. To create the down arrow shape, Add border-top property with color and add the adjacent borders with the color value of transparent.

Create Right Arrow in CSS

<div class="arrow-right"></div>

.arrow-right {
    width: 0;
    height: 0;
    border-left: 35px solid #569cbd;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

To create the right arrow effect, Add border-left property with color and add the adjacent borders with the color value of transparent.

Create Left Arrow in CSS

<div class="arrow-left"></div>

.arrow-left {
    width: 0;
    height: 0;
    border-right: 35px solid #569cbd;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

To create the left arrow shape, Add border-left property with color and add the adjacent borders with the color value of transparent.

Create Arrow of Any Direction in CSS

I have shown you how to create left, right, top and bottom arrows. What if you want your arrow to focus on the 45deg of right side?. There’s where CSS3 comes to play, with the use of rotate() in transform property we can create arrows focusing on any direction.

<div class="arrow-any-direction"></div>

.arrow-any-direction {
    width: 0;
    height: 0;
    border-bottom: 35px solid #569cbd;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    transform: rotate(45deg);
}

The rotate(45deg) gives the arrow focusing on the top right direction, whereas the negation of it rotate(-45deg) will direct towards the top left.

The rotate(135deg), focus towards bottom right direction, whereas the negation of it rotate(-135deg) focus towards the bottom left direction.

Hope, It helps.If you know any other method or tricks, make a comment below. Thank You