それでは初めに完成デモをご覧ください。

完成デモ

続いて各ソースコードです。

始めにHTMLです。

HTML

続いてCSSです。

CSS

*,
:before,
:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.ear-left,
.ear-right,
.face,
.teak-left,
.teak-left:after,
.teak-right,
.teak-right:after {
    background:#424242;
}

.bg {
    height:400px;
    margin:0 auto;
    position:relative;
    width:450px;
}

.ear-left,
.ear-left:after,
.ear-right,
.ear-right:after {
    border-radius: 50%;
    position:absolute;
}

.ear-left {
    height:100px;
    top:50px;
    left:70px;
    width:100px;
    z-index:0;
}

.ear-left:after {
    content:'';
    height:50px;
    top:50%;
    left:50%;
    margin-top:-25px;
    margin-left:-25px;
    width:50px;
}

.ear-right {
    height:100px;
    top:50px;
    right:70px;
    width:100px;
    z-index:0;
}

.ear-right:after {
    content:'';
    height:50px;
    margin-top:-25px;
    margin-right:-25px;
    top:50%;
    right:50%;
    width:50px;
}

.ear-left:after,
.ear-right:after { background:#B45F04; }

.teak-left,
.teak-left:after,
.teak-right,
.teak-right:after {
    border-radius: 50%;
    height:50px;
    width:100px;
    position:absolute;
}

.teak-left {
    top:60%;
    left:25px;
}

.teak-left:after {
    content:'';
    bottom:60%;
}

.teak-right {
    top:60%;
    right:25px;
}

.teak-right:after {
    content:'';
    bottom:60%;
}

.hair {
    background:#000;
    border-radius:20px 20px 50% 50%;
    height:150px;
    margin-left:-25px;
    position:absolute;
    top:0;
    left:50%;
    width:50px;
    z-index:1;
}

.eyebrow-left {
    border-left:30px solid transparent;
    border-right:60px solid transparent;
    border-top: 30px solid transparent;
    border-bottom:40px solid #000;
    height:0;
    position:absolute;
    top:90px;
    left:120px;
    width:0;
    z-index:2;
}

.eyebrow-left2 {
    background:#434343;
    border-radius:150px 300px 100% 100% / 150px 250% 100% 100%;
    height:60px;
    position:absolute;
    top:144px;
    left:117px;
    width:100px;
    z-index:2;
}

.eyebrow-right {
    border-left:60px solid transparent;
    border-right:30px solid transparent;
    border-top: 30px solid transparent;
    border-bottom:40px solid #000;
    height:0;
    position:absolute;
    top:90px;
    right:120px;
    width:0;
    z-index:2;
}

.eyebrow-right2 {
    background:#434343;
    border-radius:300px 150px 100% 100% / 250% 150px 100% 100%;
    height:60px;
    position:absolute;
    top:144px;
    right:117px;
    width:100px;
    z-index:2;
}

.eye-left {
    background:#fff;
    border-left:3px solid #000;
    border-radius:100% 140% 120% 100%/ 100% 120% 120% 50%;
    height:90px;
    overflow:hidden;
    position:absolute;
    top:165px;
    left:145px;
    width:64px;
    z-index:2;
}

.eye-left:before {
    background:#87CEFA;
    border-radius:50%;
    content:'';
    height:82px;
    position:absolute;
    bottom:0;
    right:0;
    width:55px;
    z-index:3;
}

.eye-left:after {
    background:#000;
    border-radius:50%;
    content:'';
    height:74px;
    position:absolute;
    bottom:0;
    right:0;
    width:46px;
    z-index:4;
}

.eye-left-white {
    background:#fff;
    border-radius:50%;
    height:20px;
    position:absolute;
    top:20px;
    left:30px;
    width:20px;
    z-index:5;
}

.eye-right {
    background:#fff;
    border-right:3px solid #000;
    border-radius:140% 100% 100% 120% / 120% 100% 50% 120%;
    height:90px;
    overflow:hidden;
    position:absolute;
    top:165px;
    right:145px;
    width:64px;
    z-index:2;
}

.eye-right:before {
    background:#87CEFA;
    border-radius:50%;
    content:'';
    height:82px;
    position:absolute;
    bottom:0;
    left:0;
    width:55px;
    z-index:3;
}

.eye-right:after {
    background:#000;
    border-radius:50%;
    content:'';
    height:74px;
    position:absolute;
    bottom:0;
    left:0;
    width:46px;
    z-index:4;
}

.eye-right-white {
    background:#fff;
    border-radius:50%;
    height:20px;
    position:absolute;
    top:20px;
    right:30px;
    width:20px;
    z-index:5;
}

.face {
    border-radius:120px;
    height:300px;
    margin-left:-150px;
    position:absolute;
    top:80px;
    left:50%;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
    width:300px;
}

.face-bottom {
    border-radius:120px;
    content:'';
    height:280px;
    margin-top:-140px;
    margin-left:-140px;
    overflow:hidden;
    position:absolute;
    top:50%;
    left:50%;
    width:280px;
}

.face-bottom:before {
    background:#D2691E;
    border-radius:50%;
    content:'';
    height:90px;
    position:absolute;
    bottom:-10px;
    left:50px;
    width:250px;
    z-index:10;
}

.face-bottom:after {
    background:#D2691E;
    border-radius:50%;
    content:'';
    height:90px;
    position:absolute;
    top:130px;
    left:120px;
    -moz-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    transform:rotate(-90deg);
    width:250px;
    z-index:10;
}

.nose {
    background:#D2691E;
    border-radius:50%;
    height:100px;
    margin-left:-60px;
    position:absolute;
    bottom:50px;
    left:50%;
    width:120px;
    z-index:20;
}

.nose:before {
    background:#FF0000;
    border-radius:50%;
    content:'';
    height:70px;
    margin-top:-40px;
    margin-left:-50px;
    position:absolute;
    top:50%;
    left:50%;
    width:100px;
}

.nose:after {
    background:#fff;
    border-radius:50%;
    content:'';
    height:20px;
    margin-top:-15px;
    margin-left:-5px;
    position:absolute;
    top:50%;
    left:50%;
    width:20px;
}

.mouse-top {
    border-bottom:3px solid #FF0000;
    border-radius:50%;
    height:100px;
    margin-left:-100px;
    overflow:hidden;
    position:absolute;
    bottom:55px;
    left:50%;
    width:200px;
    z-index:1000;
}

.mouse-top:before {
    background:#fff;
    border-radius:100%;
    content:'';
    height:15px;
    margin-left:-30px;
    position:absolute;
    bottom:-7px;
    left:50%;
    width:60px;
}

.mouse-bottom {
    background:#FF0000;
    border-radius:50%;
    height:21px;
    margin-left:-32px;
    position:absolute;
    left:50%;
    bottom:45px;
    width:64px;
    z-index:40;
}

CSSは記述が長く見えますが、ベンダープレフィックスを除けば特に難しい記述はありません。

以上です。