Web developer, Norwich - Clive Portman

Create a triangle with CSS

Published under CSS

Published on Sunday 6th May 2012
.triangle {
	width: 0; height: 0;		
	border: 50px solid transparent;
	border-right: 50px solid #fff;
}

So you're creating four borders, one for each size of the box. They are all transparent apart from the border opposite the apex of the triangle, meaning the above will produce a triangle pointing to the left. Much better than using an image, right?