CSS Nonagon

I need a nonagon to improve the interface of my oven (in my kitchen), which has the worst UI ever.

by Kai Carver

HTML

<div class="square" style="transform: rotate(  0deg)">one</div>
<div class="square" style="transform: rotate( 40deg)">two</div>
<div class="square" style="transform: rotate( 80deg)">three</div>
<div class="square" style="transform: rotate(120deg)">four</div>
<div class="square" style="transform: rotate(160deg)">five</div>
<div class="square" style="transform: rotate(200deg)">six</div>
<div class="square" style="transform: rotate(240deg)">seven</div>
<div class="square" style="transform: rotate(280deg)">eight</div>
<div class="square" style="transform: rotate(320deg)">nine</div>

CSS

.square {
  position: absolute;
  left: 10em;
	width: 7.25em;
	height: 20em;
  clip: rect(0,20em,10em,0);
  background: rgba(255, 200, 200, 0.2);
  text-align: center;
}