Wheel of fortune

CSS based wheel

HTML

<div style="background-image: url(http://i.imgur.com/ENalwBB.png); width: 484px; height: 484px; margin-left:113px;">
  <div class="pie" data-start="0" data-value="30">1</div>
  <div class="pie" data-start="30" data-value="30">2</div>
  <div class="pie" data-start="60" data-value="30">3</div>
  <div class="pie" data-start="90" data-value="30">4</div>
  <div class="pie" data-start="120" data-value="30">5</div>
  <div class="pie" data-start="150" data-value="30">6</div>
  <div class="pie" data-start="180" data-value="30">7</div>
  <div class="pie" data-start="210" data-value="30">8</div>
  <div class="pie" data-start="240" data-value="30">9</div>
  <div class="pie" data-start="270" data-value="30">10</div>
  <div class="pie" data-start="300" data-value="30">11</div>
  <div class="pie" data-start="330" data-value="30">12</div>
</div>

CSS

.pie {
    position: absolute;
    width: 120px;
    height: 242px;
    overflow: hidden;
    left: 363px;
    transform-origin: left bottom;
    background-color: rgba(200,200,255,0.4);
    border:#777 1px solid;
  }
  
   .pie:BEFORE {
    content: "";
    position: absolute;
    width: 242px;
    height: 484px;
    left: -242px;
    border-radius: 1000px 0 0 1000px;
    transform-origin: right center;
  }
 
  /*
  add colour to each piece.
*/
  
  .pie.active:BEFORE,
  .pie:hover:AFTER,
  .pie:hover:BEFORE {
    background-color: yellow;
    opacity: 0.5;
    transition: background-color 0.1s;
  }
  /*
  now rotate each piece based on their cumulative starting
  position
*/
  
  .pie[data-start="0"] {}
.pie[data-start="30"] { transform: rotate(30deg); }
.pie[data-start="60"] { transform: rotate(60deg); }
.pie[data-start="90"] { transform: rotate(90deg); }
.pie[data-start="120"] { transform: rotate(120deg); }
.pie[data-start="150"] { transform: rotate(150deg); }
.pie[data-start="180"] { transform: rotate(180deg); }
.pie[data-start="210"] { transform: rotate(210deg); }
.pie[data-start="240"] { transform: rotate(240deg); }
.pie[data-start="270"] { transform: rotate(270deg); }
.pie[data-start="300"] { transform: rotate(300deg); }
.pie[data-start="330"] { transform: rotate(330deg); }
/*
  and rotate the amount of the pie that's showing.
*/
  
  .pie[data-value="30"]:BEFORE {
    transform: rotate(30deg);
  }

JavaScript

function highlight(el, delay) {
  setTimeout(function() {
     el.className += ' active';
     //un-highlight
     setTimeout(function() {  el.className = 'pie'; }, 200)
  }, delay)
}


var divs = document.querySelectorAll('.pie');
for (var i = 0; i < divs.length; i++) {
  highlight(divs[i], i*200);
}