BearCSS

HTML
<body> <!-- Begin Image --> <!-- Invisible Box--> <div class="box"> <div class = "nose"> <div class ="noseinner"> </div> </div> <div class = "nosetrbot"> <div class = "nosetrbotinner"></div> </div> <div class = "nosebot"> <div class ="nosebotinner"> </div> </div> <div class = "nosebotinner2"> </div> <div class=" head"> <div class = "headinner"> <div class = "whitestripeleft"> </div> <div class = "whitestriperight"></div> <div class = "whitestripe"></div> <div class = "lefteye"> <div class = "lefteyeinner"></div> </div> <div class = "righteye"> <div class = "righteyeinner"> </div> </div> <div class = "mid"> <div class = "midinner"> </div> </div> </div> </div> <div class = "leftear"> <div class = "leftearinner"> </div> </div> <div class = "rightear"> <div class = "rightearinner"> </div> </div> <!-- End Invisible Box --> </div> </body>
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%); }
JAVASCRIPT
Expand for more options Login