モデルはコウテイ(皇帝)ペンギンです。
html
<div class="penguin">
<div class="head">
<div class="eyes"></div>
<div class="beak"></div>
</div>
<div class="body"></div>
<div class="wing"></div>
<div class="tail"></div>
<div class="foot1"></div>
<div class="foot2"></div>
</div>
css
.penguin{
position: relative;
margin: 16px 0 0 50px;
}
.penguin .head{
position: absolute;
width: 90px;
height: 40px;
border-radius: 100%;
background: #242A1C;
box-shadow: 2px -2px 0 0 #D19D00 inset;
z-index: 2;
}
.penguin .eyes{
position: absolute;
top: 10px;
right: 13px;
width: 6px;
height: 6px;
border-radius: 100%;
background: #000;
box-shadow: 0 0 0 1px #EEE inset;
}
.penguin .beak{
position: absolute;
top: 14px;
left: 78px;
}
.penguin .beak:before,
.penguin .beak:after{
position: absolute;
content: "";
display: inline-block;
}
.penguin .beak:before{
border: 3px solid transparent;
border-right: 50px solid #242A1C;
border-radius: 0 100% 0 0;
transform: rotate(3deg);
}
.penguin .beak:after{
top: 5px;
left: 8px;
border: 3px solid transparent;
border-right: 35px solid #C26134;
border-radius: 0 0 100% 0;
transform: rotate(1deg);
}
.penguin .body{
position: absolute;
top: 16px;
left: -21px;
width: 120px;
height: 200px;
border-radius: 50% 90% 90% 90% / 100%;
background: #39485A;
box-shadow: -10px 16px 0 0 #F4F3EE inset;
overflow: hidden;
z-index: 1;
}
/* 腹の白い部分 */
.penguin .body:before{
position: absolute;
top: 10px;
right: -12px;
content: "";
width: 95px;
height: 200px;
border-radius: 100%;
background: #F4F3EE;
box-shadow: -3px 10px 0 0 #D19D00 inset;
transform: rotate(18deg);
}
.penguin .wing{
position: absolute;
top: 70px;
left: -10px;
width: 40px;
height: 110px;
border: 1px solid #000;
border-top: 1px solid transparent;
border-radius: 0 50% 10% 100%;
background: #39485A;
transform: rotate(10deg);
z-index: 2;
}
.penguin .tail{
position: absolute;
top: 135px;
left: -40px;
border: 40px solid transparent;
border-bottom: 40px solid #39485A;
border-radius: 100%;
}
.penguin .foot1,.penguin .foot2{
position: absolute;
width: 35px;
height: 12px;
border-radius: 0 100% 0 40%;
background: #242A1C;
box-shadow: 2px -3px 0 0 #242A1C;
}
.penguin .foot1{
top: 208px;
left: 38px;
}
.penguin .foot2{
top: 205px;
left: 40px;
}
腹の白い部分はoverflow: hidden;
を使って表現しています。