javascript - ¿Cómo puedo crear un dado virtual (para jugar a los dados) utilizando HTML y CSS?

Estoy tratando de hacer un dado virtual (para jugar a los dados) usando CSS/HTML y JavaScript... Mi parte de JavaScript funciona, pero no puedo lograr que el HTML/CSS lo muestre como quiero (sin crear una tabla sin bordes y poner cada punto en una celda). Hice el siguiente JSfiddle: http://jsfiddle.net/ShoeMaker/KwBaN/5/ y cuando obtienes un 4, 5 o 6 puedes ver mi problema..

Quiero obtener un dado analógico con un conjunto de corchetes [ ] con el número correcto de puntos dentro. 1. debería tener un punto en el centro-centro 2. debería tener un punto en la esquina superior izquierda y uno en la esquina inferior derecha 3. debería tener un punto en la esquina superior izquierda, uno en el centro-centro y uno en la esquina inferior derecha 4. debería tener uno en la esquina superior izquierda, superior derecha, inferior izquierda e inferior derecha 5. debería tener uno en la esquina superior izquierda, superior derecha, centro-centro, inferior izquierda e inferior derecha 6. debería tener tres en la parte superior y tres en la parte inferior (o tres a lo largo del lado izquierdo y tres a lo largo del lado derecho).

He pensado en crear una tabla sin bordes, pero me gustaría intentar hacerlo primero con bloque/en línea y superíndice/subíndice. NO quiero mostrar imágenes (no está permitido). Solo necesitan mostrar el resultado final, no parpadear y pretender estar rodando (aunque eso podría ser interesante en el futuro). No me importa hacer que sean “digitales” usando caracteres ASCII o algo similar. (Demasiado tradicional, como los dados analógicos).

¿Alguna idea de por qué mi fiddle no funciona como quiero?

Un par de notas adicionales menores...

Es posible que quiera usar esto con dados "no estándar" (aquellos con 7, 9, 12, 20, ??? caras) en el futuro, necesita ser fácilmente adaptable (Usar ":" no funciona).
Me gustaría que fuera relativamente pequeño (No debería ocupar 1/8 de la pantalla por dado (¡Yahtzee ocuparía más de la mitad de la pantalla!))

Respuesta #1

Un par de cosas.

Los elementos span ya son elementos en línea, por lo que no necesitas especificarlo en tu CSS.

Tenga en cuenta que sus elementos "row" ahora están envueltos dentro de un contenedor principal con un estilo de visualización "inline-block". Los elementos internos se cambiaron para ser elementos block ya que desea que estén "apilados" uno sobre otro para lograr el efecto deseado.

<span class="bracket">[</span>
<div id="die">
    <div id="TopRow">&nbsp;&nbsp;&nbsp;</div>
    <div id="MidRow">&nbsp;&nbsp;&nbsp;</div>
    <div id="BotRow">&nbsp;&nbsp;&nbsp;</div>
</div>
<span class="bracket">]</span>

#die {
    display: inline-block; 
    padding: 5px;             
}

span.bracket {
    font-size: 95px;       
}

#TopRow, #MidRow, #BotRow {
    font-weight: bold;           
}

Fiddle actualizado: http://jsfiddle.net/KwBaN/11/

EDITAR: Según tu comentario, aquí hay otra actualización para hacer que el "dado" sea un poco más pequeño:

div {
     padding: 0;
     margin: 0; 
}

#die {
    display: inline-block;              
}

span.bracket {
    font-size: 40px;       
}

#TopRow, #MidRow, #BotRow {
    font-weight: bold;  
    font-size: 12px;
    line-height: 8px;    
}

otro fiddle actualizado: http://jsfiddle.net/KwBaN/34/

Respuesta #2

Hice algo de HTML y CSS y el resultado está aquí -

http://jsfiddle.net/ashwyn/KwBaN/21/

Editar:
Fiddle actualizado con CSS en línea.
http://jsfiddle.net/ashwyn/KwBaN/36/