HTML & CSS: Triangles

The triangle - a beautiful three sided polygon. In this tutorial, we're going to learn how to use the CSS border property to our advantage to create triangles using CSS!

So before we jump in and go straight to the code - let's learn a little bit about how CSS borders are drawn. Go ahead and give an element a border and then colour each border side differently - you'll notice something about the angles at which the borders are drawn at. Take a look at the below JSFiddle for example:

You can see that the borders meet at 45° angles. This interesting behaviour seems to me like something we might be able to use in clever ways to create angular shapes! If we use the same example but bring the width and height down to 0, the border segments should actually create four triangles that meet in the center...

It worked! Now if we take a sensible step from here, we should just be able to set all the border sides that we don't want to display, to the colour of transparent, and the result should be a nice looking triangle! Leaving the border-top coloured should create a down facing triangle, leaving the border-bottom coloured should create an up facing triangle, leaving the border-left coloured should create a right facing triangle, and leaving the border-right coloured should create a left facing triangle. If you don't understand why this would be - look at the four triangles we created earlier again and how they are formed by borders.

There is however at current a small problem with this technique of creating triangles, which is that in every triangle, one border property messes with it a bit. With our left pointing triangle, the border-left property simply isn't necessary and just takes up space. For this reason, removing the unnecessary property for each triangle will avoid un-necessary padding and properties. With this in mind - we can go ahead and create classes for each four triangles:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.left_triangle, .right_triangle, .up_triangle, .down_triangle {
	display: block;
	width: 0px;
	height: 0px;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	margin: 10px; /* Purely Presentational */
	float: left; /* Purely Presentational */
}
.left_triangle {
	border-right-color: black;
	border-left: none;
}
.right_triangle {
	border-left-color: black;
	border-right: none;
}
.up_triangle {
	border-bottom-color: black;
	border-top: none;
}
.down_triangle {
	border-top-color: black;
	border-bottom: none;
}

This can be shown to be functioning properly in the JSFiddle below:

Brilliant, so we can create triangles using these classes which make use of a trick with borders! We can also adjust the angles of the triangle by tampering with the different border sizes. I won't be going much into this as the results often won't render well in some browsers, but you might want to play around with it in your own time.

Other kinds of triangles can also be created by combining different border sides. Top left facing, top right facing, bottom left facing, and bottom right facing triangles can all be created through usage of only two border sides - either border-top and border-right, or border-bottom and border-left, with one being transparent and the other having a colour. Through the use of this behaviour, I have created four classes for these different kinds of triangles, all of which can be seen below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.top_right_triangle, .top_left_triangle, .bottom_left_triangle, .bottom_right_triangle {
	display: block;
	width: 0px;
	height: 0px;
	margin: 10px; /* Purely Presentational */
	float: left; /* Purely Presentational */
}

.top_left_triangle, .bottom_right_triangle {
	border-right: 20px solid transparent;
	border-top: 20px solid transparent;
}
.top_left_triangle { border-top-color: black; }
.bottom_right_triangle { border-right-color: black; }

.top_right_triangle, .bottom_left_triangle {
	border-bottom: 20px solid transparent;
	border-right: 20px solid transparent;
}
.top_right_triangle { border-right-color: black; }
.bottom_left_triangle { border-bottom-color: black; }

Once again, here's that in a JSFiddle:

We can use all of these triangles which we can now create (all 8 of them, and that's excluding angle modifications!) for a whole bunch of different purposes. One of the coolest things about this method of creating triangles using CSS is that it can be done using only one element, so we could make a triangle from a pseudo-element if we wanted to! Triangle pseudo-elements are often used to create cool-looking 3D banner effects, the diagonal-facing triangles are often used for "paper fold back" effects, and in general triangles are super useful for design features. Triangles also play a big part to the general process of creating different shapes using CSS - a six-pointed star can be created using only two triangles, and most complex shapes created using only CSS will utilize triangles in some way. Chris Coyier has a really cool page that lists off a bunch of shapes you can create using only one element (and some pseudo-elements in some of the cases) that you can take a look at here.