Creating CSS Triangles Without Sprites

In your site, especially in a blog or carousel, you may want to have triangles to indicate navigation between the ‘next’ and ‘previous’ post or something similar. While this can be done using sprites, there is a simple CSS trick you can use to create triangles that are supported in all browsers.

This trick is based on the particular behavior of edges in CSS. Though it sounds weird, you start by placing a transparent border. By placing a transparent border around a DIV tag you can then give two different colors to two adjacent edges, to produce an inclined edge. If both are the same width, the angle is exactly 45 °.

Here are some examples:

CSS

.triangle-up {
	width: 0; 
	height: 0; 
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;	
	border-bottom: 25px solid blue;
}

Result:

CSS

.triangle-down {
	width: 0; 
	height: 0; 
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 25px solid red;
}

Result:

CSS

.triangle-right {
	width: 0; 
	height: 0; 
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
	border-left: 25px solid green;
}

Result:

CSS

.triangle-left {
	width: 0; 
	height: 0; 
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent; 
	border-right:25px solid black;
}

Result: