<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 : #A68A64;
--forehead: #ff8005;
--face: #e4e4e4;
--stripe: #656565;
--nose: #69350d;
--ears:#e76f00;
}
body{
width:100%;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
position:relative;
background: var(--bg);
}
#head{
width:25vw;
height:18vw;
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:16vw;
height:10vw;
position:absolute;
top:5vw;
border-radius:5vw;
}
#forehead::before{
left:-5vw;
}
#forehead::after{
right:-5vw;
}
.eyes{
position:absolute;
background:#000;
width:2.5vw;
height:2.5vw;
top:6.75vw;
left:6.5vw;
border-radius:50%;
z-index:3;
}
.eyes:nth-child(2){
left:initial;
right:6.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:3vw;
display:flex;
justify-content:center;
}
#nose{
background:var(--nose);
width:45%;
height:2vw;
border-radius:2vw;
position:absolute;
top:.5vw;
}
.ear{
width:7vw;
background:var(--ears);
height:20vw;
border-radius:8vw;
position:absolute;
margin-left:3.5vw;
display:flex;justify-content:center;
margin-top:-7vw;
}
.ear:nth-child(2){
margin-left:15vw;
}
.ear::after{
content:'';
width:3.5vw;
background:#e1e5e4;
height:100%;
top:1.5vw;
position:absolute;
border-radius:6vw;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.