<div style="transform:scale(1.4);">
<div class="ear"></div>
<div class="ear"></div>
<div id="head">
<div id="forehead">
<div class="eyes"></div>
<div class="eyes"></div>
</div>
<div id="muzzle">
<div id="nose"></div>
</div>
</div>
</div>
*{
margin:0;
}
:root{
--bg : #bcb99d;
--forehead: #c4c4c4;
--face: #e4e4e4;
--nose: #69350d;
--ears:#939393;
}
body{
width:100%;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
position:relative;
background: var(--bg);
}
#head{
width:25vw;
height:22vw;
background: var(--face);
border-radius:25vw 25vw 4vw 4vw;
overflow:hidden;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
#forehead{
position:absolute;
width:100%;
height:50%;
top:0;
background:var(--forehead);
}
#forehead::before, #forehead::after{
content:'';
background:var(--face);
width:15vw;
height:15vw;
position:absolute;
top:5vw;
border-radius:50%;
}
#forehead::before{
left:-1vw;
}
#forehead::after{
right:-1vw;
}
.eyes{
position:absolute;
background:#000;
width:2.5vw;
height:2.5vw;
top:8.5vw;
left:7.5vw;
border-radius:50%;
z-index:3;
}
.eyes:nth-child(2){
left:initial;
right:7.5vw;
}
.stripe{
background:var(--stripe);
width:18vw;
height:4vw;
position:absolute;
top:11.5vw;
z-index:2;
transform:rotate(50deg);
border-radius:3.5vw;
right:-5.75vw;
}
.stripe:nth-child(2){
transform:rotate(-50deg);
left:-5.75vw;
right:auto;
}
#muzzle{
background:#efefef;
width:7vw;
height:6vw;
border-radius:4vw;
position:absolute;
bottom:2vw;
transform:scale(1.4);
display:flex;
justify-content:center;
}
#nose{
background:var(--nose);
width:45%;
height:2vw;
border-radius:2vw;
position:absolute;
top:.5vw;
}
.ear{
width:6vw;
background:var(--ears);
height:18vw;
border-radius:8vw;
position:absolute;
margin-left:2.5vw;
display:flex;justify-content:center;
margin-top:-5vw;
}
.ear:nth-child(2){
margin-left:16.5vw;
}
.ear::after{
content:'';
width:4vw;
background:#e1e5e4;
height:100%;
top:1vw;
position:absolute;
border-radius:6vw;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.