Dividere un div

[angel_death]

E' possibile con javascript, o tramite css, dividere un div "circolare" in n parti con delle linee in base ad un angolo immesso?

Altrimenti avete altre idee?

L'idea di partenza sarebbe fare un form in cui vengono immessi un angolo e 3 colori.

SE è immesso 1 Colore ==> Il div sarà interamente colorato in quel modo.
SE sono immessi 2 Colori ==> Il div sarà diviso in 2 parti, colorati secondo i colori immessi. La linea che taglia il div sarà in base all'angolo.
SE sono immessi 3 Colori ==> Come sopra, solo che è diviso in 3 parti

Purtroppo non credo sia possibile con Javascript, ma chiedere non mi costa nulla, magari si arriva ad un altro modo!

#Pallina{ border:2px solid #000000; padding:10px 10px; background:#FF6666; width:20px; border-radius:20px; }

<div id="Pallina">99</div> 

Grazie in anticipo!

[cavicchiandrea]

Forse questo può aiutarti

[angel_death]

Grazie mille!
In sè non mi è stato molto utile, ma mi ha aiutato a scoprire <canvas> di cui non sapevo nemmeno l'esistenza!
Tutto risolto!

[angel_death]

Scusatemi l'ulteriore post ma non ho per niente risolto!
Una volta disegnato l'elemento in <canvas>, in questo caso un cerchio, dovrei:
1- Fare in modo che ruoti, in base all'angolo immesso, solo il cerchio e non la scritta all'interno di esso;
2- Fare in modo che ruoti la primissima immagine del cerchio, e non il cerchio precedentemente disegnato...Non so se mi sono spiegato bene.

1-
Per quanto riguarda la prima parte, questo è il codice di creazione del cerchio con i diversi background:

// Parte centrale 
ctx.beginPath(); ctx.fillStyle = "#"+col2; 
ctx.arc(75,95,50,4.3,2,false); ctx.lineWidth = 4; 
ctx.fill(); ctx.strokeStyle = "black"; ctx.stroke(); 
ctx.closePath(); 
// Parte destra 
ctx.beginPath(); ctx.fillStyle = "#"+col3; 
ctx.arc(75,95,50,1.2,5.1,true); ctx.lineWidth = 4; 
ctx.fill(); ctx.strokeStyle = "black"; ctx.stroke(); 
ctx.closePath(); 
// Parte sinistra 
ctx.beginPath(); ctx.fillStyle = "#"+col1; 
ctx.arc(75,95,50,2,4.3,false); ctx.lineWidth = 4; 
ctx.fill(); ctx.strokeStyle = "black"; ctx.stroke(); 
ctx.closePath(); 

Questo è il codice che dovrebbe permettere la rotazione del cerchio creato, ho dovuto effettuare prima la traslazione nel centro del cerchio 75;95, ruotarlo eppoi riportarlo alla posizione di partenza:

ctx.beginPath(); 
ctx.translate(75, 95); ctx.rotate(radians); ctx.translate(-75, -95);
ctx.closePath(); 

Infine questo è quello che scrive nella pallina:

ctx.beginPath(); 
ctx.font = "bold 35px Verdana"; 
ctx.fillStyle = "#"+NumeroMaglia; ctx.fillText("99", 50, 105); 
ctx.closePath(); 

Il problema non capisco dov'è, fatto sta che la rotazione mi crea questo elemento, ruotando la scritta ma non il cerchio...con tutto che la funzione che crea la scritta è messa dopo quella della rotazione...

Prima: ANGOLO DI ROTAZIONE 0°

Dopo: ANGOLO DI ROTAZIONE 33°


Inoltre se premo ulteriormente il tasto "Anteprima" per generare un altro cerchio, mi ruota la figura precedente di 30°, ruotando questa volta sia il cerchio che la scritta (la scritta ruotata quindi rispetto alla prima immagine di 60°) ricollegandosi al secondo problema!

C'è qualcuno che può aiutarmi?