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
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 🙂
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.
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 🙂
[…] 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. […]
Nice, Cool.
Thanks
Addy
dsvgf
dr dryh er e u vishu
nice fuck off!
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.
Good luck! Sounds ambitious.
Is it possible to create a shape like two sides curvy and two side are shard edges????
or four side curvy?
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..???
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/
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???
Sorry Sam, you’re better off using images.
Hi there- I’m using Chrome and only the first 4 examples work. Very cool though!
Yup, that’s the problem with taking advantage of weird browser quirks.
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 🙂
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.
[…] the call out part so I search for “how to build triangles in CSS” and found some stuff on […]
[…] 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. […]
Your “dashed” (and the “heart”) trick works only Firefox…
A Long List of Shapes
[…] 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. […]
[…] https://blog.v3.russellheimlich.com/pure-css-shapes-triangles-delicious-logo-and-hearts/ […]
thanks..
[…] 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. […]
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.
It can be hit or miss and is really more of an experimental technique.
Check out this Draw Shape Demo http://cssdraw.jcubic.pl/ using color pixel, the output is pure 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. […]
[…] 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. […]
[…] 创建一个三角形 是一ç§è®¾ç½®è¾¹æ¡†é¢œè‰²3çš„4è¾¹é€æ˜Žã€‚ ä½ ä¹Ÿè¦è®¾ç½®å…ƒç´ 的宽度和高度是0为所有4个角è½,以满足在一个点。 ä½ å¯ä»¥è®¾ç½®è¾¹ç•Œå¯¹é¢çš„三角形为0,但相邻的边界需è¦ç»´æŠ¤ä¸€ä¸ªå®½åº¦æˆ–æ•´ä¸ªå…ƒç´ ä¸Žè¾¹ç•Œå°†ä¼šå´©æºƒåˆ°ä¸€ä¸ªå•ä¸€çš„点。 […]