Making Arrows with CSS

Arrows are used all over the web but more often than not, they are created with small little png images. No doubt, this is a viable way to create them but I prefer to limit the amount of images to as small a number as possible on a site. So below, is a demonstration of how they can be created and the code which will do it. The reason for this blog post is I just had to create a css triangle while working on my university project. A screenshot of the triangle I created is shown below:
Screen Shot 2013-04-05 at 14.30.06

So how do we create them?

Well, they can be made simply with a div width 0px and wide borders. The borders all join up and the only way they can do that is by creating triangles. And example below shows a 0px wide div with borders 50px, all joined together to create a square of 4 border triangles.

 

Screen Shot 2013-04-05 at 14.36.47

 

The code for this is:

.divname{
border-color:blue black blue black;
border-style:solid;
border-width:50px;
width:0px;
}

 

We could now make it just one triangle by making all the rest of the sides transparent.

Screen Shot 2013-04-05 at 14.40.46

Code for this:

.divname{
border-color:transparent black transparent transparent;
border-style:solid;
border-width:50px;
width:0px;
}

This is identical to the last code, with the difference that 3 of the sides have been made transparent. A common use of these triangles is for tooltips, which may mean that you require it to be slightly opaque. We can do this by rather than setting the colour as solid black, we can use rgba in css to set it black with a transparency. For the below screenshot, I used rgba(0,0,0,0.4).

Screen Shot 2013-04-05 at 14.44.16

Again, the code for this is:

.divname{
border-color:transparent rgba(0,0,0,0.4) transparent transparent;
border-style:solid;
border-width:50px;
width:0px;
}