How to make a triangle in pure CSS?
Another straight to the point solution
In this post I'll show you a trick to draw triangles in pure CSS. Why should you want to draw triangles in CSS instead of using images? Because CSS needs less bytes, it's easier to modify colors and size (you can it with just CSS) and it can be enlarged easily (which would lead to horrible pixelation when using images).How can you use it on a webpage? Well, you can for example draw arrows.
Before we start using this technique, we should understand the method behind this trick.
Basically everything is based on drawing rectangles with big border, like this one:
Here's HTML+CSS code for this rectangle:
<div style="margin: 0 auto; width: 300px; height: 50px; border-top: 20px solid red;border-left: 20px solid blue;border-right: 20px solid green; border-bottom: 20px solid yellow"></div>
And then making them smaller (width and height = 0):
<div style="margin: 0 auto; width: 0; height: 0px; border-top: 20px solid red;border-left: 20px solid blue;border-right: 20px solid green; border-bottom: 20px solid yellow"></div>
Now, we are going to slice a piece of this rectangle which covers our triangle- and that's it! See below a few examples!
Down arrow
font-size: 0px;
line-height: 0%;
width: 0px;
border-top: 30px solid blue;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
Up arrow
font-size: 0px;
line-height: 0%;
width: 0px;
border-bottom: 30px solid blue;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
Right arrow
font-size: 0px;
line-height: 0%;
width: 0px;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 30px solid blue;
Left arrow
font-size: 0px;
line-height: 0%;
width: 0px;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 30px solid blue;
Comments