How to make an arrow with CSS and HTML

In this article we will learn how to make an arrow with CSS and pure HTML, without adding images or JavaScript codes.

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

It’s much better to create geometric shapes and symbols with CSS

That’s because we can handle them however we want and even change their shapes

Another good alternative would be svgs, but let’s solve our problem for this article by creating an arrow with CSS only

See the required HTML:

<!DOCTYPE html>
<html>
 <head>
  <title>Criar flecha com CSS</title>
 </head>
 <body> 
  <div id="head"></div>
  <div id="body"></div>
 </body>
</html>

Now let’s go to CSS:

#head{ 
 width: 0;
 height: 0; 
 border-top: 25px solid transparent;
 border-left: 50px solid #000;
 border-bottom: 25px solid transparent;
 margin-left: 50px;
}

#body{ 
 width: 50px;
 height: 25px;
 background: #000; 
 position: absolute; 
 margin-top: 12.5px;
}

Let’s go through the explanations, first in the point element (which represents the arrowhead) we create a triangle with border properties

These instructions will form a triangle with the point to the right.

And then we create a rectangle, which is the body of the arrow, simply giving a height and width to the div and filling it with a background

See the arrow in the browser: