A CodePen by Shadab Ahmed.

index.html

<section>
 <table class="grid">
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <tbody>
   <tr> <td> <td> <td> <td> <td> <td> <td> <td> <td> 
   <tr> <td> <td> <td> <td> <td> <td> <td> <td> <td>
   <tr> <td> <td> <td> <td> <td> <td> <td> <td> <td>
   <tr> <td> <td> <td> <td> <td> <td> <td> <td> <td>
   <tr> <td> <td> <td> <td> <td> <td> <td> <td> <td>
   <tr> <td> <td> <td> <td> <td> <td> <td> <td> <td>
   <tr> <td> <td> <td> <td> <td> <td> <td> <td> <td>
   <tr> <td> <td> <td> <td> <td> <td> <td> <td> <td>
   <tr> <td> <td> <td> <td> <td> <td> <td> <td> <td>  
 </table>
 </section>
<div class="selector" style="display:none">
<table class="selector first">     
  <tbody>
   <tr> <td> <td> <td>
</table>     
<table class="selector second">     
  <tbody>
   <tr> <td> <td> <td>
</table>     
<table class="selector third">     
  <tbody>
   <tr> <td> <td> <td>
</table>
</div>

script.coffee

class SudokuGrid
  @set : (input)->
    for row,x in input
      for col, y in row
        console.log col
        $("table.grid tr:nth-child(#{x+1}) td:nth-child(#{y+1})").text(col)
        
SudokuGrid.set [[1,2,1,1,1,1,1,1,1],
             [1,3,1,1,1,1,1,1,1],
             [1,4,1,1,1,1,1,1,1],
             [1,5,1,1,1,1,1,1,1],
             [1,6,1,1,1,1,1,1,1],
             [1,7,1,1,1,1,1,1,1],
             [1,8,1,1,1,1,1,1,1],
             [1,9,1,1,1,1,1,1,1],
             [1,1,1,1,1,1,1,1,1]]

style.scss

@import "compass";
table.grid { 
  border-collapse: collapse;
  border: solid thick; left: 100px;
  top: 100px;
  position: absolute; 
  tr:nth-child(3) { border-bottom: solid medium; }
  tr:nth-child(6) { border-bottom: solid medium; }
  td:nth-child(3) { border-right: solid medium; }
  td:nth-child(6) { border-right: solid medium; }
  td { border: solid thin; height: 3.4em; width: 3.4em; 
    text-align: center; padding: 0; }
}

div.selector{
  position: absolute;
  position: absolute;
  z-index: 9999;
  left: 299px;
  top: 200px;
}

table.selector {
  //background-color: aqua;
  border-collapse: collapse;
  border: solid 1px;
  &.first{
    -webkit-transform: rotate(-60deg);
    -webkit-transform-origin: -20% 60%;
  }
  &.second{
    -webkit-transform: rotate(60deg);
    -webkit-transform-origin: 120% 60%;
  }
  &.third{
  }
  td { border: solid thin; height: 1.4em; width: 1.4em; 
    text-align: center; padding: 0; }

}