Pure CSS Shapes: Triangles, Delicious Logo, and Hearts
After reading through Smashing Magazine’s latest article, 50 New CSS Techniques For Your Next Web Design, I came across an article glossing over a technique for creating a triangle using pure CSS. A triangle using just CSS? That blew my mind! How is that even possible?
After playing around with the sample CSS I started to get it. Using an empty HTML element and the border properties, you can make all kinds of shapes. Here is how it works.
Note: As expected, Internet Explorer acts a bit wonky especially IE6. These experiments were done in Firefox 3.5 but you can see what they should look like in a screenshot I took.
Per the box model, the border outlines the perimeter of an element. When an element has a width and height of 0px the border-width’s make up the dimensions of the element.The corners of borders meet at a 45° angle which is apparent with larger border widths and what makes pure CSS shapes possible. The final CSS to make a 200 pixel tall red triangle pointing up looks like this:
But let’s see how we got to this conclusion step by step starting with a basic square and borders. Each border will be given a different color so we can tell them apart.
.triangle { border-color: yellow blue red green; border-style: solid; border-width: 200px 200px 200px 200px; height: 0px; width: 0px; }
We won’t need the top border so we can set its width to 0px. This makes our triangle easy to measure without any extra space on top; a border-bottom value of 200px will result in a triangle that is 200px tall.
.triangle { border-color: yellow blue red green; border-style: solid; border-width: 0px 200px 200px 200px; height: 0px; width: 0px; }
To hide the two side triangles we set the border-color to transparent. If we set the border-left and border-right widths to 0px then the whole shape would collapse, leaving us with nothing. Since the top-border has been effectively deleted, we can set the border-top-color to transparent as well.
.triangle { border-color: transparent transparent red transparent; border-style: solid; border-width: 0px 200px 200px 200px; height: 0px; width: 0px; }
There you have it; a triangle using only a single, empty HTML element and some CSS. The same technique can be applied to the other three sides for different orientations. Where might this come in handy? A JavaScript toggle to indicate a container is visible comes to mind. And using a pure CSS triangle is a lot more convenient than coming up with new images for each variation.
Try playing around with different widths to create different kinds of triangles. You can also get some funky effects by changing the border-style; dotted produces a neat effect on our regular bordered square.
.funkyShape { border-color: yellow blue red green; border-style: dotted; border-width: 200px 200px 200px 200px; height: 0px; width: 0px; }
I even managed to come up with the del.icio.us logo.
.delicious { border-color:#FFFFFF #3274D0 #D3D2D2 #000000; border-style:dashed; border-width:150px; height:0; width:0; }
And a heart shape.
.heart { border-color:red; border-style:dotted; border-width:0 150px 150px 0; height:0; margin-left:90px; margin-top:90px; width:0; }
I wasn’t the first one to explore CSS shapes, it turns out Tantek Çelik was playing around with these ideas way back in 2001.
You should also post the html markup so that other folks can reproduce your experiments
Reply
Oops! Should have been more specific but you only need a single empty element with the class name used in my post above. Example: <div class=”triangle”></div>
Ah cool.. Thanks for the update
Reply
Russell, I’m pretty impressed with the huge dotted border example. I hadn’t considered using the dots as shapes themselves. I thought you just had four elements in there with border-radius. Looks like these don’t quite hold up in Safari, but minor detail. Thanks for opening my eyes a bit.
Reply
Yea I doubt it works in anything other than Firefox 3.5 come to think of it. Atleast the triangle should render consistently. When canvas support goes mainstream web design is going to totally change.
cool
i did the heart !
great
tks for sharing
Reply
[...] Creating a triangle is a matter of setting the border-color on 3 of the 4 sides to transparent. You also want to set the width and height of the element to be 0 in order for all 4 corners to meet at a point. You can set the border opposite the triangle to 0 as well, but the adjacent borders need to maintain a width or the entire element with borders will collapse to a single point. [...]
[...] Creating a triangle is a matter of setting the border-color on 3 of the 4 sides to transparent. You also want to set the width and height of the element to be 0 in order for all 4 corners to meet at a point. You can set the border opposite the triangle to 0 as well, but the adjacent borders need to maintain a width or the entire element with borders will collapse to a single point. [...]
[...] by Pure CSS Shapes: Triangles, Delicious Logo, and Hearts and with Free Comic Book Day coming up I created a Green Lantern logo using CSS, HTML and no [...]
[...] sent me word of his pure CSS shapes experiment, which are very pretty. He’s managed to make the Delicious logo and a heart shape using CSS [...]
[...] Creating a triangle is a matter of setting the border-color on 3 of the 4 sides to transparent. You also want to set the width and height of the element to be 0 in order for all 4 corners to meet at a point. You can set the border opposite the triangle to 0 as well, but the adjacent borders need to maintain a width or the entire element with borders will collapse to a single point. [...]
[...] Creating a triangle is a matter of setting the border-color on 3 of the 4 sides to transparent. You also want to set the width and height of the element to be 0 in order for all 4 corners to meet at a point. You can set the border opposite the triangle to 0 as well, but the adjacent borders need to maintain a width or the entire element with borders will collapse to a single point. [...]