CSS HTML

How to make an arrow with CSS and HTML

November 21, 2021

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.

How to make an arrow with CSS cover

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:

And so we complete our goal of creating an arrow with just HTML and CSS

I emphasize again that it is important that we learn to create shapes with CSS

Another example given here on the blog was a hexagon, which you can check here

The so-called shapes in CSS have very few limitations and we should explore them

Conclusion

In this article we learned that we can create an arrow with HTML and CSS, we use HTML tags to structure its parts like body and tip

Then we inserted the CSS to shape the elements, which eventually formed an arrow

Want to learn more about CSS? Click here!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x