Grow your CSS skills. Land your dream job.

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:

View Demo   Download Files

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!

Comments

  1. 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?

    • Permalink to comment#

      Website is looking very nice.. But in ie7, ie8 there are design issues.
      It will be excellent If you fix those issues.

      -vara

  2. Permalink to comment#
    #oct {
    	width:200px;
    	height:200px;
    	background:red;
    	position:relative;
    }
    #oct::before {
    	display:block;
    	width:200px;
    	height:200px;
    	border:100px solid white;
    	border-top:0;
    	border-left:0;
    	-moz-transform:rotate(45deg);
    	-webkit-transform:rotate(45deg);
    	position:absolute;
    	content:'';
    	left:-50px;
    	top:20px;
    }
    
    #oct::after {
    	display:block;
    	width:200px;
    	height:200px;
    	border:100px solid white;
    	border-top:0;
    	border-left:0;
    	-moz-transform:rotate(-135deg);
    	-webkit-transform:rotate(-135deg);
    	position:absolute;
    	content:'';
    	left:-50px;
    	bottom:20px;
    }
  3. 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

  4. 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…

    #circle {
    	width: 100px;
    	height: 100px;
    	background: red;
    	-moz-border-radius: 50%;
    	-webkit-border-radius: 50%;
    	border-radius: 50%;
    }
    
    #oval {
    	width: 200px;
    	height: 100px;
    	background: red;
    	-moz-border-radius: 50% / 50%;
    	-webkit-border-radius: 50% / 50%;
    	border-radius: 50% / 50%;
    }

    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.

  5. Permalink to comment#

    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.

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

  7. Permalink to comment#

    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. ;-)

  8. hey pal, really nice..

  9. Permalink to comment#

    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!

  10. 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;
    }

  11. greg
    Permalink to comment#

    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.

  12. Permalink to comment#

    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.

  13. Russell
    Permalink to comment#

    I had a look to see how these rendered in IE – you should check out the pentagon!

  14. Permalink to comment#

    Really nice trick chris… But this one I have tried at my home before also…

  15. Permalink to comment#

    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.

  16. wow, great..

  17. Very nice, doest work in IE6 :(
    The star thing here in the comment box is very cool as well

  18. fabio
    Permalink to comment#

    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.

  19. Permalink to comment#

    Hey Chris, very nice demo. Thank you :-)

  20. I think the heart shape needs just that extra finish: http://media.johmanx.com/heart.png

  21. Permalink to comment#

    awesome; I’ve been wanting a one-stop CSS shape resource, thanks!

  22. Permalink to comment#

    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!

  23. Brett
    Permalink to comment#

    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.

  24. Chris
    Permalink to comment#

    Ok, how in the name of heck does the heart work?

    • Permalink to comment#

      It’s a red squaere with two really big dots from a dotted border on the top and the left… Clever stuff indeed :)

    • Chris
      Permalink to comment#

      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!

  25. Permalink to comment#

    I can’t help but wonder if there’s a way to force triangular shaped text areas strictly with css borders.

  26. Permalink to comment#

    Very nice Chris, cool experiment. I’ll have to bookmark this one.

  27. 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;
      }

  28. This is excellent! Thanks for sharing Chris!

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

    • colin (random programmer)
      Permalink to comment#

      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*/
      }

      ……………….

    • colin (random programmer)
      Permalink to comment#

      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*/
      }

  30. Permalink to comment#

    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.

  31. Permalink to comment#

    Mmmm virtual hotdog > http://jsbin.com/ayogi3

  32. Permalink to comment#

    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

  33. Permalink to comment#

    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.

  34. Permalink to comment#

    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

  35. Let’s see some gradients in there.

  36. Permalink to comment#

    can we fill gradient color with CSS ?

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

  38. Permalink to comment#

    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 =)

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

  40. Red Feet
    Permalink to comment#

    this version supports IE10 & IE9 as well:

    #parallelogram {
        width: 150px;
        height: 100px;
        -webkit-transform: skew(20deg);
           -moz-transform: skew(20deg);
            -ms-transform: skew(20deg);
             -o-transform: skew(20deg);
                transform: skew(20deg);
        background: red;
    }
  41. aamc
    Permalink to comment#

    Could i put an image inside one of this shipes?
    i saw something with circles on bootstrap, but i want to use many of this shapes.
    Thanks!

  42. DeeKay
    Permalink to comment#

    Hey, I made the Commodore Logo in CSS-Shapes. Check it out, I’d be so proud if you added that to the page! ;-)

    `#chickenhead { position: relative; top: 107px; left: 160px; border-bottom: 51px solid red; border-left: 0px solid transparent; border-right: 50px solid transparent; height: 0; width: 56px;}

    chickenhead:before { content: “”; position: absolute; bottom: -117px; left: -154px; font-size: 20em; /* This controls the size. */ width: 0.4em; height: 0.4em; border: 0.18em solid blue; border-radius: 0.5em; clip:rect(0px,153px,250px,0px); }

    chickenhead:after { content: “”; position: absolute; bottom: 9px; border-top: 51px solid blue; border-left: 0px solid transparent; border-right: 50px solid transparent; height: 0; width: 56px; }`

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".