CSS
body{
background: black;
}
.box{
position: relative;
margin: auto;
display: block;
margin-top: 8%;
width: 600px;
height: 420px;
background: none;
}
.head{
position: absolute;
margin: auto;
display: block;
top:16.5%;
left: 25%;
width: 50%;
height: 67%;
background: white;
clip-path: polygon(50% 0%, 76% 0, 100% 47%, 77% 83%, 50% 83%, 27% 83%, 0 47%, 24% 0);
z-index:1;
}
.headinner{
position: absolute;
margin: auto;
display: block;
top: 2%;
left: 1.5%;
right: 1.5%;
bottom: 2.5%;
width: 97%;
height: 97%;
background: black;
clip-path: polygon(50% 0%, 76% 0, 100% 47%, 77% 83%, 27% 83%, 0 47%, 24% 0);
z-index:1;
}
.leftear{
position: absolute;
margin: auto;
display: block;
top: 8.5%;
left: 25%;
width: 20%;
height: 40%;
background: white;
-webkit-clip-path: polygon(40% 5%, 100% 47%, 47% 100%, 0 44%);
z-index: 0;
}
.leftearinner{
position: absolute;
margin: auto;
display: block;
top: 4%;
left: 4%;
width: 92%;
height: 92%;
background: black;
-webkit-clip-path: polygon(40% 5%, 100% 47%, 47% 100%, 0 44%);
z-index: 0;
}
.rightear{
position: absolute;
margin: auto;
display: block;
top: 8.5%;
right: 25%;
width: 20%;
height: 40%;
background: white;
-webkit-clip-path: polygon(60% 5%, 0% 47%, 53% 100%, 100% 44%);
z-index: 0;
}
.rightearinner{
position: absolute;
margin: auto;
display: block;
top: 4%;
left: 4%;
width: 92%;
height: 92%;
background: black;
-webkit-clip-path: polygon(60% 5%, 0% 47%, 53% 100%, 100% 44%);
z-index: 0;
}
.mid{
position: absolute;
margin: auto;
display: block;
width: 100%;
height: 100%;
background: white;
-webkit-clip-path: polygon(50% 0, 77% 83%, 27% 83%);
z-index:2;
}
.midinner{
position: absolute;
margin: auto;
display: block;
top: 6.5%;
left: 4.7%;
width: 91%;
height: 91%;
background: black;
-webkit-clip-path: polygon(50% 0, 77% 85.5%, 27% 85.5%);
z-index:2;
}
.nosebot{
position: absolute;
margin: auto;
display: block;
top: 71.5%;
left: 27.8%;
width: 40%;
height: 40%;
background: white;
-webkit-clip-path: polygon(27% 0, 90% 0, 83% 25%, 33% 25%);
z-index: 3;
}
.nosebotinner{
position: absolute;
margin: auto;
display: block;
top: 0%;
left: 6.5%;
width: 89%;
height: 89%;
background: black;
-webkit-clip-path: polygon(27% 1%, 90% 1%, 83% 25%, 33% 25%);
z-index: 3;
}
.nosebotinner2{
position: absolute;
margin: auto;
display: block;
top: 36.3%;
left: 30%;
width: 36%;
height: 36%;
background: black;
-webkit-clip-path: polygon(27% 99%, 90% 99%, 83% 75%, 33% 75%);
z-index: 3;
}
.lefteye{
position: absolute;
margin: auto;
display: block;
top: 33%;
left: 26%;
height: 40%;
width: 40%;
background: white;
-webkit-clip-path: polygon(0 0, 21% 58%, 45% 0);
z-index:2;
}
.lefteyeinner{
position: absolute;
margin: auto;
display: block;
top: 4.5%;
left: 5.5%;
height: 90%;
width: 90%;
background: black;
-webkit-clip-path: polygon(0 0, 21% 58%, 45% 0);
z-index:2;
}
.righteye{
position: absolute;
margin: auto;
display: block;
top: 33%;
left: 59%;
height: 40%;
width: 40%;
background: white;
-webkit-clip-path: polygon(0 0, 21% 58%, 45% 0);
z-index:2;
}
.righteyeinner{
position: absolute;
margin: auto;
display: block;
top: 4%;
left: 0%;
height: 90%;
width: 90%;
background: black;
-webkit-clip-path: polygon(0 0, 21% 58%, 45% 0);
z-index:2;
}
.whitestripeleft{
position: absolute;
margin: auto;
display: block;
background: white;
height:30%;
width:30%;
top:17.8%;
left:0%;
-webkit-clip-path: polygon(0 91%, 90% 50%, 90% 59%, 0% 100%);
}
.whitestriperight{
position: absolute;
margin: auto;
display: block;
background: white;
height:30%;
width:30%;
top:17.9%;
left:73%;
-webkit-clip-path: polygon(100% 91%, 10% 50%, 10% 59%, 100% 100%);
}
.whitestripe{
position: absolute;
margin: auto;
display: block;
height:24%;
width:24%;
left:38%;
top: 11%;
background: white;
-webkit-clip-path: polygon(0 92%, 100% 92%, 100% 100%, 0% 100%);
z-index:3;
}
.nose{
position: absolute;
margin: auto;
display: block;
top: 60.5%;
left: 46.5%;
height: 18%;
width: 18%;
background: white;
-webkit-clip-path: polygon(0 0, 21% 58%, 45% 0);
z-index: 4;
}
.noseinner{
position: absolute;
margin: auto;
display: block;
top:4%;
left:4%;
height:80%;
width:80%;
background: black;
-webkit-clip-path: polygon(0 0, 21% 58%, 45% 0);
z-index: 4;
}
.nosetrbot{
position: absolute;
margin: auto;
display: block;
top:63%;
left:46.5%;
height:18%;
width:18%;
background:white;
-webkit-clip-path: polygon(0 100%, 21% 42%, 45% 100%);
z-index: 5;
}
.nosetrbotinner{
position: absolute;
margin: auto;
display: block;
top:18%;
left:5%;
height:77%;
width: 77%;
background: black;
-webkit-clip-path: polygon(0 100%, 21% 42%, 45% 100%);
}
