CSS3 - Triangles

making triangles out of squares using pure CSS.


Code Library »

Triangles Using Border Transparencies

Starting with a basic shape, a normal square object has four sides as shown here. Very simple markup. Now, let's mess with the square object's borders!


The Finished Product

Normal Square
Square with Black & White Borders
Square with Colored Borders
Using Color on Top Border Only
Left Arrow
Right Arrow
Bottom Arrow
Right Triangle

How It's Done

Simple Square Shape

.square {
	width: 100px;
	height: 100px;
	border: 2px solid #000000;
}

The subject is triangles. So, if we think of triangles, looking at the square above, we can imagine, four triangles, Isosceles triangles in fact, hidden within the square above.

By adding borders to each side of the square and setting the height: 0px; and width: 0px; elements, we can now see the four isosceles triangles.

If we add a bit of color to each border:, we get the image below.

Square - All Borders Assigned A Color

.coloredtriangles {
	height: 0px;
	width: 0px;
	border-top: 100px solid red;
	border-right: 100px solid blue;
	border-bottom: 100px solid green;
	border-left: 100px solid yellow;
}

Let's take it a step further and "break-out" each isosceles triangle.

Now we can't actually rip each isosceles triangle out of the box, but what we can do is with a little CSS flav' is to "hide or make transparent" the other three triangles leaving only one revealed...

Here's how we do it. Let's start with the border-top: element.

Top Arrow - Only border-top: is Colored

.top-arrow {
	width: 0px;
	height: 0px;
	border-top: 50px solid red;
	border-right: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 50px solid transparent;
}

Left Arrow - Only border-left: is Colored

.left-arrow {
	width: 0px;
	height: 0px;
	border-top: 50px solid red;
	border-right: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 50px solid transparent;
}

Right Arrow - Only border-right: is Colored

.right-arrow {
	width: 0px;
	height: 0px;
	border-top: 50px solid red;
	border-right: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 50px solid transparent;
}

Bottom Arrow - Only border-bottom: is Colored

.bottom-arrow {
	width: 0px;
	height: 0px;
	border-top: 50px solid red;
	border-right: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 50px solid transparent;
}

Now, you're ready to make different shaped triangles...

A right triangle above, is created by adjusting the size of borders

Right Triangle - Both border-left and border-bottom is Colored

.right-triangle {
	width: 0px;
	height: 0px;
	border-top: 100px solid transparent;
	border-right: 0px solid transparent;
	border-bottom: 0px solid yellow;
	border-left: 60px solid yellow;
}