CSS Nonagon Oven Dial

I needed a nonagon to improve the interface of my oven (in my kitchen), which has the worst UI ever. This version uses jquery and works for any number of sides (but looks best with the nonagon). In retrospect, better to do this in SVG, maybe with D3 or Raphael.

by Kai Carver

HTML

<div id="polygon">
  <div>CLOCK<br>OFF</div>
  <div class="micro">MICRO<br>WAVE</div>
  <div>GRILL</div>
  <div class="micro">Microwave<br>Grill</div>
  <div class="micro">Microwave<br>Grill / Oven</div>
  <div>OVEN</div>
  <div class="micro">Microwave<br>Oven</div>
  <div>PREHEAT</div>
  <div>Auto</div>
</div>
<div class="circle" id="outer"></div>
<div class="circle" id="inner"></div>

CSS

body {
  font-size: 10px;
  font-family: Arial;
}
.micro { text-decoration: underline; }
.circle { 
  position: absolute;
  border-radius: 50%; 
  border: solid lightgray 1px;
}
#outer {
  left: 3.625em;
  width: 20em;
  height: 20em;  
}
#inner {
  top: 4.75em;
  left: 7.65em;
  width: 12em;
  height: 12em;  
}
#polygon > div {
  position: absolute;
  padding-top: 0.5em;
  left: 10em;
  width: 7.25em;
  height: 19.5em;
  clip: rect(0, 20em, 10em, 0);
  background: rgba(255, 255, 255, 0);
  text-align: center;
  border: solid lightgray 0px;
}

JavaScript

var angle = 0;
var increment = 360 / $('#polygon > div').length;
$('#polygon > div').each(function() {
  $(this).css('transform', 'rotate(' + angle + 'deg)');
  angle += increment;
  
});