title: How can I create a virtual die (for playing dice) using html and css?
body: <p>I am trying to make a virtual die (for playing dice) using CSS/HTML and JavaScript...  My JavaScript part is working, but I can't seem to get the HTML/CSS to display it the way I want (without creating a borderless table and putting each dot in a cell).  I made the following JSfiddle: <a href="http://jsfiddle.net/ShoeMaker/KwBaN/5/" rel="nofollow">http://jsfiddle.net/ShoeMaker/KwBaN/5/</a> and when you get a 4, 5, or 6 you can see my problem..</p>
  
  <p>I want to get an analog die with a set of square brackets [ ] with the correct number of dots inside.
   1. should have one dot in the middle-middle
   2. should have one dot in the top-left and one in the bottom-right
   3. should have one dot in the top-left, one in the middle-middle, and one in the bottom-right
   4. should have one in the top-left, top-right, bottom-left, and bottom-right
   5. should have one in the top-left, top-right, middle-middle, bottom-left, and bottom-right
   6. should have three across the top and three across the bottom (or three down the left side and three down the right side).</p>
  
  <p>I've thought about creating a border-less table, but I would like to try and do it with block/inline and super/sub first.
  I do NOT want to display images (not allowed).
  They only need to display the end result, not flicker and pretend to be rolling (although that may be cool in the future).
  I don't care to make them "digital" using ASCII characters or the like. (Too traditional, like analog dice).</p>
  
  <p>Any ideas my my fiddle isn't working as I intend?</p>
  
  <p>Couple of minor additional notes...  </p>
  
  <ul>
  <li><p>I may want to use this with "non-standard" dice ( those with 7, 9, 12, 20, ??? sides ) in the future, needs to be easily adaptable (Using ":" doesn't work).</p></li>
  <li><p>Would like it to be relatively small (Shouldn't take up 1/8 of the screen per die  (Yahtzee would take more than half the screen!))</p></li>
  </ul>