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.

Multifarious Design Links

I’ve been doing a lot of reading and not a lot of blog-idea-generating lately. So here are some of the best stories I’ve stumbled across during the last couple of days.

ESPN to De-Clutter With New Redesign – “Instead of inundating visitors with its intense coverage of every major sport from the get-go — something that the company now believes can drive away certain fans — ESPN.com is moving in a less-is-more direction, at least on the home page.”

ESPN is simplifying it's homepage in an effort to grow it's brand.

Consumer Reports identifies the Top 5 Smartphones – The Black Jack II came out on top, followed by the T-Mobile Wing, Motorola Q9C, T-Mobile Shadow, and BlackBerry Pearl Flip. The iPhone 3G and T-Mobile G1 tied. Verizon was ranked the best carrier followed by T-Mobile. Sprint was last in most markets. T-Mobile still doesn’t have any 3G phones worth getting excited about.

Rated best smartphone by Consumer Reports.

Last week was Web Design Week at PSDTuts.com – Two of my favorite articles were Five Looks, One Layout and How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds. Both cover how to transform the message of a single layout using different colors and styles. This is a great step by step resource for the design impaired like myself.

Web Design Week

Speaking of the design impaired…
Smashing Magazine has put together the Ultimate Collection of Custom Photoshop Shapes – If you can’t draw, custom Photoshop shapes become invaluable.

Custom Photoshop Brushes