How to make an arrow with CSS – fast and easy

In this article we will learn how to make an arrow with CSS and HTML, without using JavaScript or images, in an easy and fast way.

Hey you programmer, okay? Let’s learn something new!

The needs of creating shapes with CSS are varied as it has many benefits

How to be able to shape the way we build as we see fit, which should be the main point

Another option would be with svg, which also allows us to change the object’s size and color

But let’s stick to the purpose of the article and start building the arrow with CSS

Let’s see the initial HTML:

<div id="arrow"></div>

As you can see, we only need one element, which in this case is the div with id arrow

Do you want to specialize in Web Development? Take a look at our course catalogue.

Let’s see the CSS:

#arrow {
 position: absolute;
 padding: 20px;
 box-shadow: 2px -2px 0 1px #000 inset;
 border: solid transparent;
 border-width: 0 0 2px 2px;
}

We insert an element with absolute position, to position it where it’s necessary

The padding will give the body of the arrow, that is, to increase it, just change this value

The box-shadow property will form its edges and the width of the border will give the arrow’s thickness

See the return in the browser:

An ‘L’ is displayed to us, notice the already existing arrow shape

Now we just need to rotate to the required position, see an example of an arrow to the left:

transform: rotate(45deg);

And so the arrow ‘rotates’ to the left and it’s ready:

Conclusion

In this article we learned how to create an arrow with CSS and HTML

We only use a div to structure the element in code

And then a little CSS to create an ‘L’, where we must use transform and rotate to make it the angle we need

Thus ending our arrow!

Want to learn more about HTML and CSS? Click here!