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!