<div id="rilakkuma"> <div id="face"> <div class="eye leftEye"></div> <div class="eye rightEye"></div> <div id="snout"> <div id="nose"></div> <div id="mouth"> <div class="lip leftLip"></div> <div class="lip rightLip"></div> </div> </div> <div class="clear"> </div> </div>
/* Colors Rilakkuma: c48130 (brown) Eyes and nose: 60474a (dk brown) */ #rilakkuma { background-color: #c48130; } #face { width: 500px; margin: 0 auto; position: relative; padding: 100px 0 100px; } .eye { width: 90px; height: 90px; border-radius: 45px; /* Opera 10.5, IE 9, Saf5, Chrome */ -moz-border-radius: 45px; /* FF1+ */ -webkit-border-radius: 45px; /* Saf3-4 */ background-color: #60474a; } .leftEye { float: left; } .rightEye { float: right; } #snout { background-color: #FDFCF3; float: left; height: 185px; margin: 16px 20px; width: 280px; border-radius: 200px 200px 140px 140px / 160px 160px 140px 140px; /* Opera 10.5, IE 9, Saf5, Chrome */ -moz-border-radius: 200px 200px 140px 140px / 160px 160px 140px 140px; /* FF1+ */ -webkit-border-radius: 200px 200px 140px 140px / 160px 160px 140px 140px; /* Saf3-4 */ } #nose { width: 70px; height: 70px; border-radius: 35px; /* Opera 10.5, IE 9, Saf5, Chrome */ -moz-border-radius: 35px; /* FF1+ */ -webkit-border-radius: 35px; /* Saf3-4 */ background-color: #60474a; margin: 20px auto -35px; } #mouth { margin: 0 auto; width: 220px; } .lip { float: left; background-color: #60474a; width: 110px; height: 40px; border-radius: 20px; /* Opera 10.5, IE 9, Saf5, Chrome */ -moz-border-radius: 20px; /* FF1+ */ -webkit-border-radius: 20px; /* Saf3-4 */ } .leftLip { -moz-transform-origin: top right; /* FF1+ */ -webkit-transform-origin: top right; /* Saf3-4 */ -o-transform-origin: top right; /* Opera 10.5+ */ -ms-transform-origin: top right; /* IE9 */ transform-origin: top right; -moz-transform: rotate(-45deg); /* FF3.5+ */ -o-transform: rotate(-45deg); /* Opera 10.5 */ -webkit-transform: rotate(-45deg); /* Saf3.1+, Chrome */ -ms-transform: rotate(-45deg); /* IE9 */ transform: rotate(-45deg); } .rightLip { -moz-transform-origin: top left; /* FF1+ */ -webkit-transform-origin: top left; /* Saf3-4 */ -o-transform-origin: top left; /* Opera 10.5+ */ -ms-transform-origin: top left; /* IE9 */ transform-origin: top left; -moz-transform: rotate(45deg); /* FF3.5+ */ -o-transform: rotate(45deg); /* Opera 10.5 */ -webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */ -ms-transform: rotate(45deg); /* IE9 */ transform: rotate(45deg); } .clear { clear:both; }