Skip to content

Instantly share code, notes, and snippets.

@kaicarver

kaicarver/README.md

Last active January 16, 2016 22:52
Show Gist options
  • Save kaicarver/c109f910a1633edfe53f to your computer and use it in GitHub Desktop.
Save kaicarver/c109f910a1633edfe53f to your computer and use it in GitHub Desktop.
Download ZIP
oven dial, nine-sided, in CSS
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
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;
}
</style>
<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 class="micro">Auto</div>
</div>
<div class="circle" id="outer"></div>
<div class="circle" id="inner"></div>
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
var angle = 0;
var increment = 360 / $('#polygon > div').length;
$('#polygon > div').each(function() {
$(this).css('transform', 'rotate(' + angle + 'deg)');
angle += increment;
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment