The Shapes of CSS
Published by Chris Coyier
I made a page with the shapes you can make with a single HTML element and CSS. Here is an example:
The CSS you see on the page is the real CSS rendering that shape, and it also editable, so feel free to tweak it right there. I'd love to expand it if anyone has more ideas!
Hey Chris, really nice demos, I didn’t know some of them.
I’ve launched a blog with a CSS Snippet library which aims to style just one element and gain the beautiful effects.. Check it out at imgless.com
Btw when do you add a nice vid tutorial again?
Website is looking very nice.. But in ie7, ie8 there are design issues.
It will be excellent If you fix those issues.
-vara
a bit of dirty tricks used, but got it with one element ;-) ( use on white bg :P )
Wow thats actually really impressive! Makes mw wonder if we will soon be able to stop using images for things and go purely over to css. Thanks for another great post chris
That’s really nice, very useful!
For the circle and oval one’s couldn’t you make them a bit simpler by using percentages for the border radius? You’d use something like…
That way it doesn’t matter what width or height the item is set to it’ll work. Though actually you can the same border-radius declarations for circle or oval, they just have different width and height proportions.
I really like this idea, but Safari 5 doesn’t respect the percentages it all (you end up with squares) and Opera 11 kinda wacks it up too, leaving an oblong circle and pill shaped oval.
I know this wasn’t the point of this demo, but it might be worth pointing out that a heart can also be made using ♥ ( ♥ ) which works cross-browser and not just in Firefox.
For trapazoid, wouldn’t it be easier to just do this:
I agree, Tim. That was exactly what I thought about when I saw Chris’ version.
Much better, thank you!
I accidentally used this technique when mucking around with Chris’ triangle css!
Wow this article couldn’t have come at a better time, currently doing a pure HTML and CSS design contest over at sitepoint.
I made a fish entirely out of css, but not using :before or :after attributes. I want it to be IE compatible.
Love the different shapes. Especially heart @ firefox. Like Ralf already mentioned, eagerly waiting for the next video. I wish you’d get some time to do that. ;-)
hey pal, really nice..
Never even thought about creating a star with css. Nice work.
This Nettuts quick tip about creating paper with CSS touches on some of these principals, as well: http://net.tutsplus.com/tutorials/html-css-techniques/lets-create-paper-with-css/
Thanks Chris!
I suggest using just one pseudo-element for a pentagon. A bit easier, too, maybe?
#pentagon {
border-width: 90px 30px 0;
border-style: solid;
border-color: red transparent transparent;
width: 100px;
}
#pentagon:before {
content: “”;
display: block;
position: relative;
top: -150px;
left: -30px;
border-width: 0 80px 60px;
border-style: solid;
border-color: transparent transparent red;
}
Nice tricks; I like the triangles, and can totally see some of them being used as mini-icons for links for example. However, I wonder how much strain that puts on the browser (i.e the machine rendering the page) – how does it compare to sprites, for example? I wouldn’t want to start having to block css on sites just because they abuse it, much like I’ve blocked flash just because it clogs my cpu.
I haven’t done extensive testing, but creating shapes this way I would think is FAR more efficient than using images in every case.
Nice article, awesome what you can do with just CSS!
Funny little quirk the “heart” turns into a Circle in IE, nice way to fake it at least, heh.
I guess IE can’t see the love, again.
I had a look to see how these rendered in IE – you should check out the pentagon!
Here’s another way you can do the triangle.
Typically I’ll do the gradient on a pseudo element instead and then scale the width of it’s parent so it’s not as wide. This gives you cleaner lines compared to the the border method.
Really nice trick chris… But this one I have tried at my home before also…
Not to one-up you, Chris, but this guy totally has you beat:
http://nicolasgallagher.com/pure-css-social-media-icons/demo/
Granted, CSS3 is a whole other beast.
nice find :)
wow, great..
Very nice, doest work in IE6 :(
The star thing here in the comment box is very cool as well
very nice work guys!! these do and will have many uses around the web…
one thing i would like to mention is that many continue to want things to work for browsers such as ie6 and netscape… i would tend to suggest to ‘forget’ about those browsers, but then again, that’s just my 2 cents worth.
I defiantly would not recommend forgetting about netscape! :P
Hey Chris, very nice demo. Thank you :-)
I think the heart shape needs just that extra finish: http://media.johmanx.com/heart.png
awesome; I’ve been wanting a one-stop CSS shape resource, thanks!
great content as always…peeps from Italy!
A working day:
1 – Start PC
2 – Start working
3 – Read css-tricks’ new post
4 – Read e-mails
5 – Start coding
….
Sorry for OT!
I took this as an inspiration to take it a little further.
http://dev.brettsantore.com/city.html
Best in chrome, thats really all i tested it in.
Ok, how in the name of heck does the heart work?
It’s a red squaere with two really big dots from a dotted border on the top and the left… Clever stuff indeed :)
Well, the new version plainly isn’t, but. The original Firefox-only version:
#heart {
border-color: red;
border-style: dotted;
border-width: 0 75px 75px 0;
height: 0;
margin-top: 30px;
width: 0; }
has no native width or height, and the only border directions with non-zero size are the two that don’t have the bumps on!
I can’t help but wonder if there’s a way to force triangular shaped text areas strictly with css borders.
Very nice Chris, cool experiment. I’ll have to bookmark this one.
Very awesome! I had just been thinking about how to make ribbons using only CSS. Voila!
Bookmark Ribbon:
#bookmark-ribbon {
width: 0;
height: 100px;
border-left: 50px solid red;
border-right: 50px solid red;
border-bottom: 35px solid transparent;
}
Ribbon Banner:
#ribbon-banner {
width:200px;
height: 0;
border: 15px solid transparent;
border-top: 25px solid red;
border-bottom: 25px solid red;
}
A more detailed bookmark ribbon:
#star {
width: 0;
height: 100px;
border-left: 50px solid #BA0000;
border-right: 50px solid #BA0000;
border-bottom: 35px solid transparent;
position: relative;
}
#star:after {
width: 90px;
height: 120px;
border-top: 1px dashed rgba(255,255,255,0.4);
border-bottom: 1px solid transparent;
border-left: 1px dashed rgba(255,255,255,0.4);
border-right: 1px dashed rgba(255,255,255,0.4);
position: absolute;
content: “”;
top: 4px;
right: -46px;
}
This is excellent! Thanks for sharing Chris!
Here’s an up-pointed arrow:
#arrow {
position: relative;
width: 50px;
height: 80px;
background: rgb(255, 0, 0);
}
#arrow:after {
content: "";
position: absolute;
top: -25px;
left: 0;
border: 25px solid transparent;
border-top-color: rgb(255, 0, 0);
border-right-color: rgb(255, 0, 0);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
I just used this tonight on my site at this page: http://scott-christopherson.com/entry/5 . Then I saw this post and thought “sweet, I got something to share!” I’m sure you can see how it can easily be changed to point the arrow in different directions.
had trouble when trying to adjust the arrow’s dimensions (sharper point or narrower line)… came up with slight differences… if there’s a better way of doing this, let me know.
#arrow {
position: relative;
margin-top:40px; /*height of triangle*/
margin-left:15px; /*padding around line part of arrow */
width: 40px; /*width of line part of arrow */
height: 80px; /*height of line part of arrow */
background: rgb(255, 0, 0);
}
#arrow:after {
content: “”;
position: absolute;
width: 0;
height: 0;
top:-40px; /*height of triangle*/
border-bottom: 40px solid red; /*height of triangle*/
left:-15; /*padding around line part of arrow */
border-left: 35px solid transparent; /*Arrow width / 2*/
border-right: 35px solid transparent; /*Arrow width / 2*/
}
……………….
oops. i left in testing parts. here’s what i meant to paste:
#arrow {
position: relative;
width: 40px; /*width of line part of arrow */
height: 80px; /*height of line part of arrow */
background: rgb(255, 0, 0);
}
#arrow:after {
content: “”;
position: absolute;
left:-15; /*padding around line part of arrow */
border-left: 35px solid transparent; /*Arrow width / 2*/
border-right: 35px solid transparent; /*Arrow width / 2*/
top:-40px; /*height of triangle*/
border-bottom: 40px solid red; /*height of triangle*/
}
Awesome stuff! I tried my hand at it, I couldn’t quite figure out how the the verticals relate to the width on the triangles when you’re trying to make a non right triangle.
I made a star, but I’ve only tested it in chrome.
Mmmm virtual hotdog > http://jsbin.com/ayogi3
I know it is more than one element but this is a CSS only Atom, http://bgre.at/demo/CSS3-atom/index.html
It is only Webkit Friendly and the animation works only in Safari
Anyone have any idea why the aliasing is so poor within Chrome/Safari/Firefox on OSX and fine in Windows? Racking my brain to find a solution. Great little technique that I’d like to implement within a project but the aliasing issue is a deal breaker.
These are actually brilliant Chris!
Can’t wait to try implementing them into user controls, I’ll have to have a play also using the pseudo shapes to create some 3d affects to.
Very nice work
Dan
Let’s see some gradients in there.
can we fill gradient color with CSS ?
Hi Chris
I’m a total beginner, just now going through your CSS tutorial for Kailin’s website. It’s pretty hard for me but I am happy to say I managed to get an arrow on my page and even change the color! Thanks – back to the tutes – the rest of my page is shocking but I hope to get there in the end with your help.
This was so much help for me, Im currently learning to code css from scratch and this is way much better than making a background with the shape =)
Awesome tutorial :) I’ve used the triangles (topleft and topright) to create a ribbon effect ( http://bit.ly/fCwP75 ) this snippet is a modification for the tutorial ( http://bit.ly/hzN73H ), I made it fully CSS, images free.
Thanks, really helpful :P
here’a a toxic symbol. using only one div (plus the body as a wrapper)