Who among us hasn’t at some point in their life thought, “Golly, I wish there were a way I could create triangles with CSS!” Okay, I realize no one has ever actually said that, but while at first glance the topic of creating a triangle using code available to a front-end developer might seem trivial and needless, its use can help improve your site’s loading time and ease customization.
Over the course of many projects and especially now in the realm of responsive design, I have found the use of icons increasing on the web. With this increased use of icons, you would be hard-pressed to find a design that does not incorporate an arrow or some sort of directional indicator, and in a variety of colors. You could of course save each of these icons out as a PNG and apply them to the site as image tags or background images, but with an arrow in every direction and a multitude of colors, you will quickly wind up with a whole heap of icon files. What to do then to combat this image overload? Create your directional icons with CSS.
Let’s take a look at some code.
Here we have a simple span tag with a class applied to it. We want to use this element as our icon, an orange arrow that is facing right. The CSS required to create this is incredibly simple.
There is the magic, folks. The border style is the key element in this technique; more specifically what happens when you apply a transparent border on opposing sides. This will result in an orange triangle that is 20px tall, 10px wide and pointing to the right.
Knowing this, you can easily create any kind of triangle you desire, be it right, acute or obtuse. Now let’s add another triangle to this code and get a little more fancy with our arrow.
All we have changed in the code above is nested another span tag inside of the one we had previously created.
In our first selector, we have added a new line to relatively position the outer element. With this in place, we can add the styles to our inner element to make it a white triangle that is half the size of its parent. The reason we needed to relatively position the outer span is that we need to absolutely position the inner span on top of it. Because the triangles we are seeing are made entirely out of borders, the widths and heights of these two triangles are both 0, and the “top left” corner of the span tag is actually the righthand point of the triangle. This is why we specify the -5px for the top style to move the smaller triangle halfway up its “height”, and -10px to move it all the way to the left. The resulting icon will now look like this:
Is that not the fanciest arrow you have ever seen? The beauty of using CSS to create this icon is that we can now change the shape, size or color of it by altering only a few lines of code. If we had saved this icon as an image, changing it would be a much bigger hassle.
Now that you know how to create a triangle with CSS, you are prepared to make mostly any basic shaped icon you need if you couple it with some squares, rectangles or circles. Icons for play, pause, stop, next, previous, up, down, left, right, and even more complex shapes like a home icon or a chat bubble can all be created without having to export one single image from Photoshop. Challenge yourself and see what else you can create with the power of the triangle at your fingertips!
Developer Tutorial: How to Make a Triangle with CSS
by Zach Handing on December 18th, 2012 | ~ minute read
