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

Question

Sto provando a creare un dado virtuale (per giocare a dadi) usando CSS/HTML e JavaScript ... La mia parte JavaScript funziona, ma non riesco a ottenere l'HTML/CSS per visualizzarlo nel modo che voglio (senza creare un tavolo senza bordi e mettendo 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 insieme di parentesi quadre [] con il numero corretto di punti dentro. 1. dovrebbe avere un punto nel mezzo medio 2. dovrebbe avere un punto in alto a sinistra e uno in basso a destra 3. dovrebbe avere un punto in alto a sinistra, uno nel mezzo-medio e uno in basso a destra 4. dovrebbe averne uno in alto a sinistra, in alto a destra, in basso a sinistra e in basso a destra. 5. dovrebbe averne uno in alto a sinistra, in alto a destra, in mezzo centrale, in basso a sinistra e in basso a destra 6. dovrebbero avere tre in alto e tre in basso (o tre in basso a sinistra e tre in basso a destra).

Ho pensato di creare un tavolo senza margini, ma mi piacerebbe provare a farlo con block/inline e super/sub prima. NON desidero visualizzare le immagini (non consentito). Hanno solo bisogno di visualizzare il risultato finale, non lo sfarfallio e fingere di essere a rotazione (anche se potrebbe essere bello in futuro). Non mi interessa renderli "digitali" usando caratteri ASCII o simili. (Troppo tradizionale, come i dadi analogici).

Tutte le mie idee non funzionano come intendo?

Coppia di minori note aggiuntive ...

• mi consiglia di utilizzare questo con i dadi "non standard" (quelli con 7, 9, 12, 20, ??? lati) nel futuro, deve essere facilmente adattabile (usare ":" non funziona).

• vorrebbe che fosse relativamente piccola (non dovrebbe prendere 1/8 dello schermo per dado (Yahtzee sarebbe voluto più di metà dello schermo)!)

Answer 1

Un paio di cose.

Gli elementi di span sono già elementi in linea quindi non è necessario specificarli all'interno del css.

Nota che gli elementi "riga" sono ora racchiusi in un contenitore padre con uno stile di visualizzazione di "blocco in linea". Gli elementi interni sono stati modificati in block elementi in modo da renderli "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;   
} 

violino Aggiornato: http://jsfiddle.net/KwBaN/11/

EDIT: Secondo il vostro commento qui è un altro aggiornamento per rendere il "die" un po 'più piccola:

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

Answer 2

HTML:

<span>[</span> 
<div style="display:inline-block;"> 
    <div id='top'></div> 
    <div id='mid'></div> 
    <div id='bot'></div> 
</div> 
<span>]</span> 

Basta aggiungere le dimensioni dei caratteri a roba e rendere l'ID corretto e dovrebbe funzionare. Visualizza i punti su tre file una sopra l'altra. Forse pasticciare con line-height per renderlo bello.

Answer 3

Un concetto come questo?

http://jsfiddle.net/NuRKL/12/

Answer 4

Ho fatto qualche HTML e CSS e il risultato è qui -

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

Edit:
violino Aggiornato con CSS in linea.
http://jsfiddle.net/ashwyn/KwBaN/36/