<!DOCTYPE html> <html> <head> <style> .watch-container{ width:250px; height:250px; position:relative; border:1px solid black; } .watch{ position:absolute; width:80%; height:80%; border-radius:50%; border:10px solid rgb(210,210,210); border-radius:50%; background-color:rgb(250,250,250); left:6%; top:6%; } .left-ear, .right-ear{ width:40%; height:40%; border-radius:45%; border:none; background-color:rgba(15,157,88,1); position:absolute; top:9%; z-index:-1; } .left-ear{ left:3%; transform:rotateZ(-45deg); -webkit-transform:rotateZ(-45deg); /*For safari*/ } .right-ear{ right:3%; transform:rotateZ(45deg); -webkit-transform:rotateZ(45deg); } .center{ width:5%; height:5%; border-radius:50%; background-color:black; position:absolute; left:47.5%; top:47.5%; } .hours-needle{ transform:rotateZ(0deg); transform-origin:bottom; width:2%; height:25%; background:red; position:absolute; left:49%; top:25%; border-top-left-radius:50%; border-top-right-radius:50%; } .minutes-needle{ width:2%; height:32.5%; background:green; transform:rotateZ(10deg); -webkit-transform:rotateZ(10deg); transform-origin:bottom; -webkit-transform-origin:bottom; position:absolute; left:49%; top:17.5%; border-top-left-radius:100%; border-top-right-radius:100%; } .seconds-needle{ transform:rotateZ(20deg); -webkit-transform:rotateZ(20deg); transform-origin:bottom; -webkit-transform-origin:bottom; width:2%; height:40%; background:blue; position:absolute; left:49%; top:10%; border-top-left-radius:50%; border-top-right-radius:50%; } .left-leg, .right-leg{ position:absolute; bottom:6%; width:16%; height:1.2%; background-color:rgb(210,210,210); border-radius:20%; } .left-leg{ left:9.6%; transform:rotateZ(-45deg); -webkit-transform:rotateZ(-45deg); /* For safari */ transform-origin:left; -webkit-transform-origin:left; /* For safari */ } .right-leg{ right:9.6%; transform:rotateZ(45deg); -webkit-transform:rotateZ(45deg); transform-origin:right; -webkit-transform-origin:right; } </style> </head> <body> <div class="watch-container"> <div class="watch"> <span class="center"> </span> <span class="hours-needle"> </span> <span class="minutes-needle"> </span> <span class="seconds-needle"> </span> </div> <span class="left-ear"> </span> <span class="right-ear"> </span> <span class="left-leg"> </span> <span class="right-leg"> </span> </div> </body> </html>
Run
×
Share