console
<div class="elephant">
<div class="body"></div>
<div class="head">
<div class="eye"></div>
</div>
<div class="tooths">
<div class="tooth_1"></div>
<div class="trunk"></div>
<div class="tooth_2"></div>
</div>
<div class="thigh">
<div class="thigh_1"></div>
<div class="thigh_2"></div>
<div class="thigh_3"></div>
<div class="thigh_4"></div>
</div>
<div class="tail"></div>
</div>
body {
background-color: #87CEEB;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.elephant {
position: relative;
width: 200px;
height: 120px;
}
.body {
background-color: #808080;
width: 120px;
height: 80px;
border-radius: 20px;
position: absolute;
bottom: 20px;
left: 50px;
}
.head {
background-color: #808080;
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
top: 0;
left: 60px;
}
.eye {
background-color: #000;
width: 14px;
height: 6px;
border-radius: 50%;
position: absolute;
top: 30px;
left: 3px;
transform: rotate(0deg);
}
.eye::before{
content: "";
width: 4px;
height: 2px;
background: #fff;
border-radius: 50px 50px 0 0;
position: absolute;
transform: translate(-50%, 0);
left: 50%;
display: block;
}
.trunk {
background-color: transparent;
width: 21px;
height: 80px;
position: absolute;
top: -26px;
left: -32px;
border-radius: 50%;
border-right: 15px solid #808080;
border-top: 15px solid #808080;
transform: rotate(335deg);
}
.tooths{
position: absolute;
width: 23px;
height: 50px;
left: 26px;
top: 34px;
transform: rotate(245deg);
}
.tooths .tooth_1,.tooths .tooth_2{
width: 10px;
height: 50px;
background: transparent;
border-left:10px solid #fff;
border-radius:50%;
position: absolute;
}
.tooths .tooth_1::before,.tooths .tooth_2::before{
content: "";
width: 10px;
height: 50px;
background: transparent;
border-left:10px solid #87CEEB;
border-radius:50%;
position: absolute;
left: -5px;
top: -6px;
}
.tooths .tooth_2{
left: 5px;
top: -1px;
transform: rotate(12deg);
}
.thigh{
width: 120px;
height: 80px;
position: absolute;
bottom: -45px;
left: 50px;
}
.thigh_1,.thigh_2,.thigh_3,.thigh_4{
width: 16px;
height: 50px;
background: #808080;
position: absolute;
}
.thigh_1{
transform: rotate(17deg);
left: 10px;
}
.thigh_2{
transform: rotate(-17deg);
left: 23px;
}
.thigh_3{
transform: rotate(17deg);
right: 40px;
}
.thigh_4{
transform: rotate(-17deg);
right: 15px;
}
.tail{
background-color: transparent;
width: 12px;
height: 39px;
position: absolute;
top: 16px;
right: 24px;
border-radius: 50%;
border: 3px solid #808080;
transform: rotate(131deg);
}