Triangles and Arrow Heads with CSS

Triangles and Arrows heads are simple construct of UI though hard to make with simplicity. This article shows how to make Triangles and Arrow Heads with CSS

Triangles and Arrow Heads with CSS
Triangles and Arrow Heads

Arrows for tool tips, Triangles are possible with CSS3 also. No need go with the image approach all the time. For some cases; it would be wise to use the images for arrow heads.

Here is this article, we will be discussing a simple guide to create Triangles and Arrow Heads with CSS.

So to create the triangles and arrow heads with CSS3, I need to discuss some terms (properties) related to CSS3. They are:

  1. Pseudo Elements
  2. Borders


The borders have the hack to create these arrows. When borders are given of more width then these are rendered as having edge where two borders meet i.e. point where border-left and border-top intersect; the top-left corner will have an edge. To see it practically for an element set the border as 10px solid red for border-top and 10px solid green for border-left. Then you can see the edge properly.

Now consider a case when the element is of only zero or one pixel then it would look something like this:

<style type="text/css">
.triangles {
  border:30px solid transparent;
  border-top-color: red;
  border-right-color: blue;
  border-bottom-color: green;
  border-left-color: black;
  display: block;
  width: 0px;
  height: 0px;
<div class="triangles"></div>
Border Demo

So you can see each side is looking like a triangle; and hence by this way triangles and arrow heads can be created. Suppose if we want to create a arrow head pointing in up direction; then we can use the green section of the above image. And remaining should not be visible. To do that we will have to follow these steps:

  • Make the opposite side border as 0px. As we want the border-bottom; we will set the border-top as 0px.
  • Make the adjacent sides invisible. This can be done by setting the color as transparent. So here we will set the border-left-color and border-right-color as transparent.
  • Now include this div to an additional element which will give it a look of arrow head

You can see the above steps in following example:

<style type="text/css">
.arrow-head {
  border: 30px solid transparent;
  border-top: 0;
  border-right-color: transparent;
  border-bottom-color: green;
  border-left-color: transparent;
  display: block;
  width: 0px;
  height: 0px;
<div class="arrow-head"></div>
Arrow Head Demo

So Similarly; you can create arrow head of grey color (#ccc) with following code:

<style type="text/css">
    display: block;
    width: 0px;
    height: 0px;
    border:30px solid transparent;
    border-bottom-color: #ccc;
    border-top-width: 0px;
    border-top-color: #ccc;
    border-bottom-width: 0px;
    border-right-color: #ccc;
    border-left-width: 0px;
    border-left-color: #ccc;
    border-right-width: 0px;
<div class="arrow arrow-up"></div>
<div class="arrow arrow-down"></div>
<div class="arrow arrow-left"></div>
<div class="arrow arrow-right"></div>

And it will look like this:

Now lets come to some advanced topic; Utilising Pseudo elements for arrow heads. To use the Pseudo elements; you will need to have a container element and inside that you can have your content and the arrow head; where arrow head is positioned as absolute. Following snippet can hep you to see the use of pseudo element for upper direction arrow:

    display: inline-block;
    padding: 10px;
    border:1px solid #ccc;
    border-radius: 2px;
    margin-top: 15px;
    position: relative;
  .profile .name{
    margin: 0px;
    display: block;
    padding-bottom: 5px;
    margin-bottom: 3px;
    border-bottom: 1px dotted #ccc;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #ccc ;
    border-top: 0px;
    position: absolute;
    top: -10px;
<div class="profile">
  <p class="name">Pankaj Patel</p>
    <a href="">

And this will look like this:

Arrow Head with Pseudo Element

So now you can play with this hack and make more interactive and beautiful UIs. Happy Coding!!!

Demo  Download

Hey There! You have made it this far.

Would you like to subscribe via email?