CodePen - Live Editor

* {
						box-sizing: border-box
					  }
					  
					  body,
					  html {
						height: 98%;
						margin: 0;
						font-family: "Montserrat", sans-serif;
						
					  }
					.clock {
						position: relative;
						width: 10rem;
						height: 10rem;
						border: 2px solid black;
						border-radius: 50%;
						background: url("https://cssanimation.rocks/images/posts/clocks/ios_clock.svg") center;
						background-repeat: no-repeat;
						background-size: 88%;
						left:40%;
						margin-top:50px;	
					}
					
					.secs {
						position: absolute;
						top: 53%;
						left: 50%;
						height: 4rem;
						width: .1rem;
						background-color: tomato;
						transform: translateX(-50%);
						transform-origin: 25% 0;
					}
					
					.mins {
						position: absolute;
						top: 55%;
						left: 50%;
						height: 3.4rem;
						width: .3rem;
						border-radius: 20px;
						background-color: black;
						transform: translateX(-50%);
						transform-origin: 25% 0;
					}
					
					.hours {
						position: absolute;
						top: 55%;
						left: 50%;
						height: 2.8rem;
						width: .4rem;
						background-color: black;
						border-radius: 15px;
						transform: translateX(-50%);
						transform-origin: 50% 0;
					}
					
					.dot {
						position: absolute;
						top: 50%;
						left: 50%;
						height: 1rem;
						width: 1rem;
						border-radius: 50%;
						background-color: black;
						transform: translateX(-50%);
					}

Görünüm