<!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%; } </style> </head> <body> <div class="watch-container"> <div class="watch"> <span class="center"> </span> <span class="hours-needle"> </span> </div> <span class="left-ear"> </span> <span class="right-ear"> </span> </div> </body> </html>
Run
×
Share