<div id="wrapper">
			<div id="clock">
				  <ul class="clock-digits">
					  <li>12</li>
					  <li>3</li>
					  <li>6</li>
					  <li>9</li>
				  </ul>
				  <div class="arrow hours"></div>
				  <div class="arrow minutes"></div>
				  <div class="arrow seconds"></div>
			</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

//Variables
$selection-color:rgba(149, 165, 166,.8);
$page-bg:#34495e;
$clock-bg:rgba(236, 240, 241,1.0);
$clock-border-color:#e74c3c;
$clock-center-bg:#95a5a6;
$digits-color:#95a5a6;
$min-arrow-color:#e74c3c;
$sec-arrow-color:#e74c3c;
$hour-arrow-color:#95a5a6;

//Mixins
@mixin round {
  -moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-border-radius:50%;
	border-radius:50%;
}

@mixin minutes-arrow-rounded {
   -moz-border-radius:.4rem;
	-webkit-border-radius:.4rem;
	-o-border-radius:.4rem;
	border-radius:.4rem; 
}

@mixin seconds-hours-arrow-rounded {
   -moz-border-radius:.6rem;
	-webkit-border-radius:.6rem;
	-o-border-radius:.6rem;
	border-radius:.6rem; 
}

@mixin arrow-transform-origin {
  -webkit-transform-origin:50% 100%;
	-moz-transform-origin:50% 100%;
	-o-transform-origin:50% 100%;
	-ms-transform-origin:50% 100%;
	transform-origin:50% 100%;
}

body {
  margin:0;
	background:$page-bg;
}

::-webkit-selection {
	background:$selection-color;
	color:#fff;
} 

::-moz-selection {
	background:$selection-color;
	color:#fff;
} 

::-o-selection {
	background:$selection-color;
	color:#fff;
} 

::selection {
	background:$selection-color;
	color:#fff;
} 

#wrapper {
	width:100%;
}

#clock {
	position:relative;
	margin:50px auto;
	width:21.875rem;
	height:21.875rem;
	border:10px solid $clock-border-color;
  background:$clock-bg;
  
  @include round;
  
    &::after {
      content:'';
	    position:absolute;
	    top:10.3125rem;
	    left:10.3125rem;
	    width:1.25rem;
	    height:1.25rem;
	    z-index:15;
	    background:$clock-center-bg;
	 
      @include round;
    }
}

.arrow {
	position:absolute;
  
  @include arrow-transform-origin;
}

.minutes {
	width:.5rem;
	height:6.25rem;
	top:4.6875rem;
	left:10.6875rem;
	background:$min-arrow-color;
	z-index:12;
  
  @include minutes-arrow-rounded;
}

.seconds {
	width:.1875rem;
	height:6.25rem;
	top:4.6875rem;
	left:10.84375rem;
	background:$sec-arrow-color;
	z-index:13;
  
  @include seconds-hours-arrow-rounded;
}

.hours {
	width:.5rem;
	height:4.375rem;
	top:6.5625rem;
	left:10.6875rem;
	background:$hour-arrow-color;
	z-index:14;
  
  @include seconds-hours-arrow-rounded;
}

.clock-digits {
	list-style-type:none;
    
    & li { /*digits*/
      position:absolute;
	    color:$digits-color;
	    font-family:'Open Sans Condensed', sans-serif;
	    font-size:3em;
	    -webkit-font-smoothing: antialiased;
	    -webkit-text-shadow:1px 1px 1px rgba(236, 240, 241,1.0);
	    -moz-text-shadow:1px 1px 1px rgba(236, 240, 241,1.0);
	    -o-text-shadow:1px 1px 1px rgba(236, 240, 241,1.0);
	    -ms-text-shadow:1px 1px 1px rgba(236, 240, 241,1.0);
	    text-shadow:1px 1px 1px rgba(236, 240, 241,1.0);
      /*position of digits*/
      &:first-child {
	      top:0;
	      left:43.513513513513513513513513513514%;
      }
    
      &:nth-child(2) {
	      top:40.513513513513513513513513513514%;
	      right:4%;
      }
    
      &:nth-child(3) {
	      bottom:0;
	      left:46.756756756756756756756756756757%;
      }
    
      &:last-child {
	      left:4%;
	      top:40.513513513513513513513513513514%;
      }
  }
}
View Compiled
$(document).ready(function() {
				var clock = setInterval("getTime()",1000);
			});

				function getTime() {
					//angles
					var secChange;
					var minChange;
					var hourChange;
					
					var tget = new Date();
					
					var seconds = tget.getSeconds();
					var minutes = tget.getMinutes();
					var hours = tget.getHours();	
										
						hours = ((hours > 12) ? hours - 12 : hours);
						if (seconds === 0){
							secChange = 0;
						} else {
							secChange = seconds*6;
						}
						if (minutes === 0){
							minChange = 0;
						} else {
							minChange = minutes*6;
						}
						if (hours === 12){
							hourChange = 0;
						} else {
							hourChange = (hours*30) + (minutes/2);
						} //0.5deg
							var secArrow = "rotate(" + secChange + "deg)";
						$(".seconds").css({"-webkit-transform" : secArrow, "-moz-transform" : secArrow, "-o-transform" : secArrow, "-ms-transform" : secArrow, "transform" : secArrow});
							var minArrow = "rotate(" + minChange + "deg)";
						$(".minutes").css({"-webkit-transform" : minArrow, "-moz-transform" : minArrow, "-o-transform" : minArrow, "-ms-transform" : minArrow, "transform" : minArrow});
							var hourArrow = "rotate(" + hourChange + "deg)";
						$(".hours").css({"-webkit-transform" : hourArrow, "-moz-transform" : hourArrow, "-o-transform" : hourArrow, "-ms-transform" : hourArrow, "transform" : hourArrow});
				}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js