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.

44 Responses to “ Pure CSS Shapes: Triangles, Delicious Logo, and Hearts ”

  1. You should also post the html markup so that other folks can reproduce your experiments

    Reply

    Russell Heimlich responded on July 21st, 2009:

    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>

  2. Ah cool.. Thanks for the update :)

    Reply

  3. 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

    Russell Heimlich responded on August 14th, 2009:

    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.

  4. cool
    i did the heart !
    great
    tks for sharing :)

    Reply

  5. […] 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. […]

  6. […] 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. […]

  7. […] 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 […]

  8. […] 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 […]

  9. […] 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. […]

  10. […] 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. […]

  11. Nice, Cool.

    Thanks
    Addy

    Reply

    hi responded on June 13th, 2011:

    dsvgf

    hi responded on June 13th, 2011:

    dr dryh er e u vishu

    hi responded on June 13th, 2011:

    nice fuck off!

  12. This is a start for what I’m looking for. What I have is a large hexagon that is filled with equilateral triangles. I can create an html mapping so that each triangle is a selection for a user interface. What I’d like to do is to define each triangle as a div in CSS and use the style sheet to set the color of that particular triangle. Also, as a div, I could through code, change the text that should show in each triangle and the text would wrap appropriately within the div.

    I realize that this goes against the rectangular shaped div that would allow a scroll bar. It’s hard to picture a vertical scroll bar in a triangular div.

    Reply

    Russell Heimlich responded on August 19th, 2010:

    Good luck! Sounds ambitious.

  13. Is it possible to create a shape like two sides curvy and two side are shard edges????

    or four side curvy?

    Reply

  14. using css shapes any luck to create rounded rectangle?

    or

    Else i need left top,left right,bottom left and bottom right need to be curvy..???

    Reply

    Russell Heimlich responded on October 24th, 2010:

    Check out the border-radius property http://www.css3.info/preview/rounded-border/

    There is also a handy code generator at http://border-radius.com/

  15. Hey Russell thanks for your reply,i know the border radius property for creating rounded rectangle, i want to achieve this rounded rectangle using css shapes,is that any tricks????

    Especially i want to create the rounded rectangle in IE, I believe border-radius wont works out in IE.So i am looking for shapes to achieve this..any thoughts???

    Reply

    Russell Heimlich responded on October 26th, 2010:

    Sorry Sam, you’re better off using images.

  16. Hi there- I’m using Chrome and only the first 4 examples work. Very cool though!

    Reply

    Russell Heimlich responded on February 8th, 2011:

    Yup, that’s the problem with taking advantage of weird browser quirks.

  17. Ha- So it doesn’t work in Chrome because Chrome works too well? Ce la vie! If Chrome is such a cool kid, why can’t it render CSS dotted borders? All I get is dash-dash-dash :)

    Reply

    Russell Heimlich responded on February 9th, 2011:

    Ha, you’re right! I never noticed that. I wish the CSS spec was more specific about border styles. They can be all over the place across browsers.

  18. […] the call out part so I search for “how to build triangles in CSS” and found some stuff on […]

  19. […] 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. […]

  20. Your “dashed” (and the “heart”) trick works only Firefox…

    Reply

  21. A Long List of Shapes

    Reply

  22. […] 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. […]

  23. thanks..

    Reply

  24. […] 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. […]

  25. […] 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. […]

  26. This is one of the best tutorials I have seen on this subject. I can finally wrap my brain around this. I wanted to learn this technique so I could add ribbons to websites without using photoshop. The examples with dotted and dashed lines are neat too, but I was viewing this article in google chrome and everything looked the same as the earlier regular triangle examples, until I switched to firefox and operah. Looks like those techniques only work in those two browsers, but very cool none-the-less.

    Reply

    Russell Heimlich responded on May 23rd, 2012:

    It can be hit or miss and is really more of an experimental technique.

  27. Check out this Draw Shape Demo http://cssdraw.jcubic.pl/ using color pixel, the output is pure CSS.

    Reply

  28. […] 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. […]

  29. […] 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. […]

  30. […] 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. […]

  31. […] 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. […]

  32. […] 创建一个三角形 是一种设置边框颜色3的4边透明。 你也要设置元素的宽度和高度是0为所有4个角落,以满足在一个点。 你可以设置边界对面的三角形为0,但相邻的边界需要维护一个宽度或整个元素与边界将会崩溃到一个单一的点。 […]

Leave a Comment of Your Own