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).

by Kai Carver

HTML

<div id="polygon">
  <div>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>

CSS

body {
  font-size: 12px;
  font-family: Arial;
}
.micro { text-decoration: underline; }
#polygon > div {
  position: absolute;
  padding-top: 1em;
  left: 10em;
  width: 7.25em;
  height: 19em;
  clip: rect(0, 20em, 10em, 0);
  background: rgba(255, 255, 255, 0);
  text-align: center;
  border-top: solid lightgray 1px;
}

JavaScript

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