CSS Shape Creations

July 9, 2010

Using pure CSS3 and HTML (no images!), you can make rudimentary shapes like rectangles, circles, ovals, and triangles. Being a nerd, I’ve made some nerdy creations – a Mario mushroom, the Triforce, a Pokéball, and Kirby.

Note: you need Firefox, Safari, or Google Chrome to correctly see these.

For those that use dinosaur browsers, here’s a screenshot of what it’s supposed to look like:

CSS creations

Here’s a demo page.

The Code

Feel free to take or edit these.

Mario Mushroom

CSS:

#mushroom{height:100px;width:100px;position:relative;margin:5px;}
#mushroom .mushroomredpart{background:#B20002;width:100px;height:90px;-webkit-border-radius:120px;-moz-border-radius:120px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E40204', endColorstr='#960100');
background: -webkit-gradient(linear, left top, left bottom, from(#E40204), to(#960100));
background: -moz-linear-gradient(top,  #E40204,  #960100);}
#mushroom .spot1,#mushroom .spot2,#mushroom .spot3{height:40px;width:40px;-webkit-border-radius:40px;-moz-border-radius:40px;background:#FFF;position:absolute;}
#mushroom .spot1{left:-20px;top:15px;}
#mushroom .spot2{left:30px;top:10px;}
#mushroom .spot3{right:-20px;top:15px;}
#mushroom .head{width:70px;height:30px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;-webkit-border-bottom-right-radius:30px;-webkit-border-bottom-left-radius:30px;
-moz-border-radius:10px 10px 30px 30px;position:absolute;bottom:0;left:15px;background:#E7C77A;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFE086', endColorstr='#BFA364');
background: -webkit-gradient(linear, left top, left bottom, from(#FFE086), to(#BFA364));
background: -moz-linear-gradient(top,  #FFE086,  #BFA364);}
#mushroom .lefteye,#mushroom .righteye{height:13px;width:5px;background:#000;position:absolute;bottom:11px;-webkit-border-radius:10px;-moz-border-radius:10px}
#mushroom .lefteye{left:40px;}
#mushroom .righteye{right:40px;}

HTML:

<div id="mushroom"><div class="mushroomredpart"></div><div class="spot1"></div><div class="spot2"></div><div class="spot3"></div><div class="head"><div class="lefteye"></div><div class="righteye"></div></div></div>

Triforce

CSS:

#triforce{height:75px;width:60px;position:relative;}
#triforce .power,#triforce .wisdom,#triforce .courage{border-color:transparent transparent #F6E359 transparent;border-style:solid;border-width:25px 15px;width:0;height:0;position:absolute;}
#triforce .power{left:15px;top:0;}
#triforce .wisdom{left:0;bottom:0;}
#triforce .courage{right:0;bottom:0;}

HTML:

<div id="triforce"><div class="power"></div><div class="wisdom"></div><div class="courage"></div></div>

Pokéball

CSS:

#pokeball{height:100px;width:100px;position:relative;margin:5px;}
#pokeball .topball{width:98px;height:48px;-moz-border-radius:100px 100px 0 0;border:1px solid #000;border-bottom:3px solid #000;
background:#F77;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F77', endColorstr='#C43');
background: -webkit-gradient(linear, left top, left bottom, from(#F77), to(#C43));
background: -moz-linear-gradient(top,  #F77,  #C43);-webkit-border-top-left-radius:100px;-webkit-border-top-right-radius:100px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
#pokeball .bottomball{width:98px;height:46px;background:#FFF;-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:100px;-webkit-border-bottom-left-radius:100px;-moz-border-radius:0 0 100px 100px;border:1px solid #000;}
#pokeball .innerball{height:16px;width:16px;position:absolute;top:42%;left:40%;-moz-border-radius:16px;-webkit-border-radius:16px;background:#FFF;border:1px solid #000;z-index:1;}

HTML:

<div id="pokeball"><div class="topball"></div><div class="innerball"></div><div class="bottomball"></div></div>

Kirby

CSS:

#kirby{height:105px;width:120px;position:relative;z-index:1;}
#kirby .body{background:#F093A8;width:100px;height:100px;-webkit-border-radius:100px;-moz-border-radius:100px;margin-left:10px;}
#kirby .mouth{background:#6E3136;width:15px;height:10px;position:absolute;left:43%;top:50%;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:15px;-webkit-border-bottom-left-radius:15px;-moz-border-radius:5px 5px 15px 15px;overflow:hidden;}
#kirby .tongue{background:#FC827D;height:6px;margin-top:4px;-webkit-border-radius:15px;-moz-border-radius:15px;}

#kirby .leftfoot,#kirby .rightfoot{background:#95294D;height:20px;width:40px;position:absolute;z-index:-1;}
#kirby .leftfoot{left:5px;bottom:0;-webkit-border-top-left-radius:30px;-webkit-border-top-right-radius:10px;-webkit-border-bottom-right-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-radius:30px 10px 10px 10px;}
#kirby .rightfoot{right:5px;bottom:0;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:30px;-webkit-border-bottom-right-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-radius:10px 30px 10px 10px;}

#kirby .lefthand,#kirby .righthand{background:#F093A8;height:30px;width:30px;position:absolute;z-index:-1;-webkit-border-radius:30px;-moz-border-radius:30px;}
#kirby .lefthand{left:0;top:35%;}#kirby .righthand{right:0;top:35%;}

#kirby .leftcheek,#kirby .rightcheek{background:#DC5E84;height:8px;width:20px;position:absolute;-webkit-border-radius:20px;-moz-border-radius:20px;top:40%;}
#kirby .leftcheek{left:15%;}#kirby .rightcheek{right:15%;}

#kirby .lefteye,#kirby .righteye{background:#000;height:30px;width:10px;position:absolute;-webkit-border-radius:20px;-moz-border-radius:20px;top:16%;}
#kirby .lefteye{left:35%;}#kirby .righteye{right:35%;}
#kirby .white{height:12px;margin:1px;background:#FFF;-webkit-border-radius:20px;-moz-border-radius:20px;}
#kirby .blue{height:15px;margin:1px;background:#4A4690;-webkit-border-radius:20px;-moz-border-radius:20px;}
#kirby .bluecover{height:7px;background:#000;-webkit-border-radius:20px;-moz-border-radius:20px;}

HTML:

<div id="kirby"><div class="body"><div class="lefteye"><div class="white"></div><div class="blue"><div class="bluecover"></div></div></div><div class="righteye"><div class="white"></div><div class="blue"><div class="bluecover"></div></div></div><div class="leftcheek"></div><div class="rightcheek"></div><div class="mouth"><div class="tongue"></div></div></div><div class="lefthand"></div><div class="righthand"></div>div class="leftfoot"></div><div class="rightfoot"></div></div>

Looking back on this, all I can say is don’t underestimate Kirby’s complexity.