<header>
<div class="hair"></div>
<div class="left_eye"><span></span></div>
<div class="right_eye"><span></span></div>
<div class="left_ear"></div>
<div class="right_ear"></div>
</header>
header{
border:7px solid #000;
border-top:15px solid #000;
width:200px;
height:200px;
border-radius:50% 50% 60% 60%;
position:absolute;
background:#fff;
.hair{
position:absolute;
top:-40px;
left:80px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 140px solid #000;
border-radius:30% 30% 50% 50%;
}
.eye(@l,@r,@eye){
border:5px solid #000;
width:70px;
height:70px;
background:#ffc30a;
border-radius:@l @r;
position:absolute;
span{
width:10px;
height:10px;
display:block;
background:#000;
position:absolute;
left:@eye;
top:40px;
border-radius:50%;
}
}
.left_eye{
.eye(50%,60%,50px);
top:60px;
left:10px;
}
.right_eye{
.eye(60%,50%,10px);
top:60px;
right:10px;
}
.ear(@deg){
width:20px;
height:50px;
border:5px solid #000;
position:absolute;
top:70px;
z-index:-1;
transform:rotate(@deg);
background:#fff;
}
.left_ear{
.ear(-7deg);
left:-20px
}
.right_ear{
.ear(7deg);
right:-20px
}
}