javascript - Come posso creare un dado virtuale (per giocare a dadi) usando html e css?

Sto cercando di creare un dado virtuale (per giocare a dadi) usando CSS/HTML e JavaScript... La parte JavaScript funziona, ma non riesco a far visualizzare l'HTML/CSS nel modo in cui voglio (senza creare una tabella senza bordi e mettere ogni punto in una cella). Ho creato il seguente JSfiddle: http://jsfiddle.net/ShoeMaker/KwBaN/5/ e quando ottieni un 4, 5 o 6 puoi vedere il mio problema..

Voglio ottenere un dado analogico con un set di parentesi quadre [ ] con il numero corretto di puntini all'interno. 1. dovrebbe avere un puntino al centro-centro 2. dovrebbe avere un puntino in alto a sinistra e uno in basso a destra 3. dovrebbe avere un puntino in alto a sinistra, uno al centro-centro e uno in basso a destra 4. dovrebbe avere uno in alto a sinistra, in alto a destra, in basso a sinistra e in basso a destra 5. dovrebbe avere uno in alto a sinistra, in alto a destra, al centro-centro, in basso a sinistra e in basso a destra 6. dovrebbe avere tre lungo la parte superiore e tre lungo la parte inferiore (o tre lungo il lato sinistro e tre lungo il lato destro).

Ho pensato di creare una tabella senza bordi, ma vorrei provare a farlo prima con block/inline e apice/subindice. NON voglio visualizzare immagini (non consentito). Hanno solo bisogno di mostrare il risultato finale, senza lampeggiare e fingere di girare (anche se potrebbe essere interessante in futuro). Non mi interessa renderli “digitali” usando caratteri ASCII o simili. (Troppo tradizionale, come i dadi analogici).

Qualche idea sul perché il mio fiddle non funziona come intendo?

Un paio di note aggiuntive minori...

• Potrei voler usare questo con dadi "non standard" (quelli con 7, 9, 12, 20, ??? facce) in futuro, deve essere facilmente adattabile (Usare ":" non funziona).

• Vorrei che fosse relativamente piccolo (Non dovrebbe occupare 1/8 dello schermo per dado (Yahtzee occuperebbe più della metà dello schermo!))

Risposta n. 1

Un paio di cose.

Gli elementi span sono già elementi inline, quindi non è necessario specificarlo nel tuo CSS.

Nota che i tuoi elementi "row" sono ora racchiusi all'interno di un contenitore genitore con uno stile di visualizzazione "inline-block". Gli elementi interni sono stati modificati per essere elementi block poiché vuoi che siano "impilati" uno sopra l'altro per ottenere l'effetto desiderato.

<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 aggiornato: http://jsfiddle.net/KwBaN/11/

MODIFICA: Come da tuo commento, ecco un altro aggiornamento per rendere il "dado" un po' più piccolo:

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;    
}

un altro fiddle aggiornato: http://jsfiddle.net/KwBaN/34/

Risposta n. 2

Ho fatto un po' di HTML e CSS e il risultato è qui -

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

Modifica:
Fiddle aggiornato con CSS inline.
http://jsfiddle.net/ashwyn/KwBaN/36/