#clock {
    position:relative;
    width:10em;
    height:10em;
    line-height:1.5em;
    margin:1em auto;
    border:0.0625em solid #444;
    border-radius:50%;
    box-shadow:
      inset 0.125em 0.25em 0.5em #0005,
      -0.25em -0.5em 0.5em #FFFC,
      0 0 0.0625em 0.5em #777,
      0 0 0.0625em 0.5625em #000,
      0.125em 0.25em 0.5em 0.5em #0004;
  }
  
  #clock *,
  #clock *:before,
  #clock *:after {
    box-sizing:border-box;
    background-clip:padding-box;
  }
  
  #clock:before,
  #clock:after,
  #clock b:before,
  #clock b:after {
    position:absolute;
    width:1.5em;
    text-align:center;
  }
  
  #clock b {
    position:absolute;
    top:4.25em;
    width:100%;
  }
  
  #clock:before,
  #clock:after {
    left:4.25em;
  }
  
  #clock:before {
    content:"۱۲";
    top:0;
  }
  
  #clock:after {
    content:"۶";
    bottom:0;
  }
  
  #clock b:before {
    left:0;
    content:"۹";
  }
  
  #clock b:after {
    right:0;
    content:"۳";
  }
  
  #clock span {
    position:absolute;
    top:0;
    left:4.9375em;
    width:0.125em;
    height:100%;
  }
  
  #clock span + span {
    transform:rotate(90deg);
  }
  
  #clock i,
  #clock span:before,
  #clock span:after {
    position:absolute;
    top:0.5em;
    left:0;
    width:100%;
    height:9em;
  }
  
  #clock span:before,
  #clock span:after {
    content:"";
    border-style:solid;
    border-color:#000;
    border-width:0.5em 0;
    transform:rotate(30deg);
  }
  
  #clock span:after {
    transform:rotate(60deg);
  }
  
  #clock i {
    z-index:2;
    left:4.85em;
    width:0.3em;
    background-color:#000;
    border:solid transparent;
    border-width:0 0 3em;
    border-radius:40%;
  }
  
  #clock i:first-of-type {
    border-width:1.5em 0 3em;
  }
  
  #clock i:last-of-type {
    background-color:#F00;
  }
  
  #clock i:last-of-type:before,
  #clock i:last-of-type:after {
    content:"";
    position:absolute;
    border-radius:50%;
  }
  
  #clock i:last-of-type:before {
    top:4em;
    left:-0.375em;
    width:1em;
    height:1em;
    background:#000;
  }
  
  #clock i:last-of-type:after {
    top:4.25em;
    left:-0.125em;
    width:0.5em;
    height:0.5em;
    background:#ABC;
  }