Make a Triangle in CSS

Making a triangle is a little harder than making a square or rectangle in CSS. Here is what you do. First set up your div, we are going to give our div and id of triangle.

[code]<div id="triangle"></div>[/code]

Now we will add the CSS for the triangle.

[code]<style>
#triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 100px 100px;
border-color: transparent transparent #33ff00 transparent;
}</style>[/code]

Make a Triangle in CSS

That is how you make a triangle in CSS.  We gave this particular triangle the background color of green.  Here is a really cool website that will help you make CSS triangles. It is called the CSS triangle generator.

You can also turn the triangle up, down and sideways. See Chris Coyier’s article on css triangles here.