Cacher is the code snippet organizer for pro developers

<time datetime="T08:00"></time>
<time datetime="T03:18"></time>
<time datetime="T11:48"></time>
<time datetime="T01:24"></time>

<time datetime="T08:00"></time>
<time datetime="T03:18"></time>
<time datetime="T11:48"></time>
<time datetime="T01:24"></time>

[datetime^="T00"]:before {
  transform: rotate(0deg);
}

[datetime$=":00"]:after {
  transform: rotate(0deg);
}

[datetime^="T01"]:before {
  transform: rotate(30deg);
}

[datetime$=":01"]:after {
  transform: rotate(6deg);
}

[datetime^="T02"]:before {
  transform: rotate(60deg);
}

[datetime$=":02"]:after {
  transform: rotate(12deg);
}

[datetime^="T03"]:before {
  transform: rotate(90deg);
}

[datetime$=":03"]:after {
  transform: rotate(18deg);
}

[datetime^="T04"]:before {
  transform: rotate(120deg);
}

[datetime$=":04"]:after {
  transform: rotate(24deg);
}

[datetime^="T05"]:before {
  transform: rotate(150deg);
}

[datetime$=":05"]:after {
  transform: rotate(30deg);
}

[datetime^="T06"]:before {
  transform: rotate(180deg);
}

[datetime$=":06"]:after {
  transform: rotate(36deg);
}

[datetime^="T07"]:before {
  transform: rotate(210deg);
}

[datetime$=":07"]:after {
  transform: rotate(42deg);
}

[datetime^="T08"]:before {
  transform: rotate(240deg);
}

[datetime$=":08"]:after {
  transform: rotate(48deg);
}

[datetime^="T09"]:before {
  transform: rotate(270deg);
}

[datetime$=":09"]:after {
  transform: rotate(54deg);
}

[datetime^="T10"]:before {
  transform: rotate(300deg);
}

[datetime$=":10"]:after {
  transform: rotate(60deg);
}

[datetime^="T11"]:before {
  transform: rotate(330deg);
}

[datetime$=":11"]:after {
  transform: rotate(66deg);
}

[datetime^="T12"]:before {
  transform: rotate(360deg);
}

[datetime$=":12"]:after {
  transform: rotate(72deg);
}

[datetime$=":13"]:after {
  transform: rotate(78deg);
}

[datetime$=":14"]:after {
  transform: rotate(84deg);
}

[datetime$=":15"]:after {
  transform: rotate(90deg);
}

[datetime$=":16"]:after {
  transform: rotate(96deg);
}

[datetime$=":17"]:after {
  transform: rotate(102deg);
}

[datetime$=":18"]:after {
  transform: rotate(108deg);
}

[datetime$=":19"]:after {
  transform: rotate(114deg);
}

[datetime$=":20"]:after {
  transform: rotate(120deg);
}

[datetime$=":21"]:after {
  transform: rotate(126deg);
}

[datetime$=":22"]:after {
  transform: rotate(132deg);
}

[datetime$=":23"]:after {
  transform: rotate(138deg);
}

[datetime$=":24"]:after {
  transform: rotate(144deg);
}

[datetime$=":25"]:after {
  transform: rotate(150deg);
}

[datetime$=":26"]:after {
  transform: rotate(156deg);
}

[datetime$=":27"]:after {
  transform: rotate(162deg);
}

[datetime$=":28"]:after {
  transform: rotate(168deg);
}

[datetime$=":29"]:after {
  transform: rotate(174deg);
}

[datetime$=":30"]:after {
  transform: rotate(180deg);
}

[datetime$=":31"]:after {
  transform: rotate(186deg);
}

[datetime$=":32"]:after {
  transform: rotate(192deg);
}

[datetime$=":33"]:after {
  transform: rotate(198deg);
}

[datetime$=":34"]:after {
  transform: rotate(204deg);
}

[datetime$=":35"]:after {
  transform: rotate(210deg);
}

[datetime$=":36"]:after {
  transform: rotate(216deg);
}

[datetime$=":37"]:after {
  transform: rotate(222deg);
}

[datetime$=":38"]:after {
  transform: rotate(228deg);
}

[datetime$=":39"]:after {
  transform: rotate(234deg);
}

[datetime$=":40"]:after {
  transform: rotate(240deg);
}

[datetime$=":41"]:after {
  transform: rotate(246deg);
}

[datetime$=":42"]:after {
  transform: rotate(252deg);
}

[datetime$=":43"]:after {
  transform: rotate(258deg);
}

[datetime$=":44"]:after {
  transform: rotate(264deg);
}

[datetime$=":45"]:after {
  transform: rotate(270deg);
}

[datetime$=":46"]:after {
  transform: rotate(276deg);
}

[datetime$=":47"]:after {
  transform: rotate(282deg);
}

[datetime$=":48"]:after {
  transform: rotate(288deg);
}

[datetime$=":49"]:after {
  transform: rotate(294deg);
}

[datetime$=":50"]:after {
  transform: rotate(300deg);
}

[datetime$=":51"]:after {
  transform: rotate(306deg);
}

[datetime$=":52"]:after {
  transform: rotate(312deg);
}

[datetime$=":53"]:after {
  transform: rotate(318deg);
}

[datetime$=":54"]:after {
  transform: rotate(324deg);
}

[datetime$=":55"]:after {
  transform: rotate(330deg);
}

[datetime$=":56"]:after {
  transform: rotate(336deg);
}

[datetime$=":57"]:after {
  transform: rotate(342deg);
}

[datetime$=":58"]:after {
  transform: rotate(348deg);
}

[datetime$=":59"]:after {
  transform: rotate(354deg);
}

body {
  background-color: gray;
}

time {
  background-color: white;
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: radial-gradient(circle, #000000 6px, rgba(0, 0, 0, 0) 6px);
  background-position: center center;
  margin: 20px;
}
time:before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 30px solid black;
  background-color: transparent;
  top: 20px;
  left: 48px;
  transform-origin: center bottom;
}
time:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 40px solid black;
  background-color: transparent;
  top: 10px;
  left: 48px;
  transform-origin: center bottom;
}

// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// ----

@for $i from 0 through 59 {  
  $degmin : $i * 6;
  $deghour : $i * 30;  
  @if $i < 10  {     
    [datetime^="T0#{$i}"]:before { transform: rotate(#{$deghour}deg) }    
    [datetime$=":0#{$i}"]:after  { transform: rotate(#{$degmin}deg)  }    
  } 
  @if $i >= 10 {
    @if $i <= 12 { 
      [datetime^="T#{$i}"]:before { transform: rotate(#{$deghour}deg) }
    }    
      [datetime$=":#{$i}"]:after  { transform: rotate(#{$degmin}deg)  }      
  }
}

body {
  
  background-color: gray;
}

time { 
  background-color: white;
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;   
  background-image: radial-gradient(circle,  black 6px, transparent 6px );
  background-position: center center;
  margin: 20px;

  
  &:before {
  
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 30px solid black;
    background-color: transparent;
    top: 20px;
    left: 48px;
    transform-origin: center bottom; 

  
  }
  
  &:after {
  
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 40px solid black;
    background-color: transparent;
    top: 10px;
    left: 48px;
    transform-origin: center bottom; 
  
  }
  
}