<div id="deer">
<div class="ears"></div>
<div class="ears"></div>
<div class="horn"></div>
<div class="horn"></div>
<div id="head">
<div class="eyes"></div>
<div class="eyes"></div>
<div id="muzzle">
<div id="nose"></div>
</div>
</div>
</div>
*{
margin:0;
}
:root{
--bg : #a4ac86;
--ears: #cc9e3c;
--face: #e8b444;
--nose: #884a1b;
--muzzle:#efefef;
--eyes:#653715;
--horn:#66370d;
}
body{
width:100%;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
position:relative;
background: var(--bg);
}
#head{
width:30vw;
height:40vw;
background:var(--face);
border-radius:15vw 15vw 30vw 30vw;
position:relative;
overflow:hidden;
display:flex;
justify-content:center;
margin-bottom:-10vw;
}
#muzzle{
background:var(--muzzle);
width:30vw;
position:absolute;
height:30vw;
border-radius:50%;
bottom:-12.5vw;
display:flex;
justify-content:center;
overflow:hidden;
}
#nose{
background:var(--nose);
width:6vw;
height:6vw;
border-radius:50%;
top:-2.5vw;
position:absolute;
}
.eyes{
position:absolute;
width:8vw;
height:8vw;
background:#efefef;
border-radius:50%;
top:12vw;
left:4vw;
display:flex;
align-items:center;
justify-content:center;
}
.eyes:nth-child(2){
left:auto;
right:4vw;
}
.eyes::after{
content:'';
background:var(--eyes);
width:65%;
height:65%;
border-radius:50%;
}
.ears{
position:absolute;
width:15vw;
height:8vw;
background:var(--ears);
border-radius:0 0 0 8vw;
margin-left:-8.5vw;
border-left:2.5vw solid #6d3914;
}
.ears:nth-child(2){
margin-left:21.5vw;
border-left:none;
border-radius:0 0 8vw 0;
border-right:2.5vw solid #6d3914;
}
.horn{
width:4vw;
height:15vw;
background:var(--horn);
position:absolute;
margin-top:-15vw;
margin-left:7vw;
border-radius:4vw 4vw 0 0;
}
.horn:nth-child(3){
margin-left:19vw;
}
.horn::after{
content:'';
width:100%;
height:10vw;
border-radius:4vw 4vw 0 0;
background:var(--horn);
transform:rotate(-45deg);
position:absolute;
top:3vw;
left:-3vw;
}
.horn:nth-child(3)::after{
transform:rotate(45deg);
left:auto;
right:-3vw;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.