Positionner des divs autour d'un cercle

**rvm31** · 16/10/2014, 23h00

Bonjour

Je souhaite que des div carrés se positionnent dans la page autour d'un cercle.
Que ces div deviennent des segments de cercle en se recouvrant en partie les unes et les autres grâce à un z-index.
Ces divs sont créés dynamiquement je souhaite donc savoir si quelqu'un à une formule pour calculer le décalage top, left et rotate de chaque div automatiquement.

**Bovino** · 17/10/2014, 09h51

Au vu de la clarté de la description que tu fais, la formule la plus adaptée serait : abracadabra...

Il faudrait que tu décrives mieux le contexte et surtout les contraintes.
Bien entendu, un exemple de code aiderait largement à la compréhension et donc à la résolution.

**rvm31** · 17/10/2014, 21h21

Bovino j'ai essayé de mettre class="abracadabra" mais ça ne fonctionne pas

et sinon j'essaye de faire quelque chose qui ressemble à ça.Ces div recevront ultérieurement un background-image

Nom : exemple.jpg
Affichages : 1595
Taille : 10,2 Ko

Nom : exemple.jpg
Affichages : 1595
Taille : 10,2 Ko

pour le code pour le moment j'ai ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin:0;
		padding:0;
	}
	img{
		position:relative;
		z-index: 10;
		width:100vw;
	}
	#a0{
		position: relative;
		z-index: 10;
		width: 13vw;
		background-color: yellow;
		height: 12vw;
 
		top: -45vw;
		left: 30vw;
		transform: rotate(91deg);
}
	#a1{
		position: relative;
		z-index: 13;
		width: 13vw;
		background-color: rgba(159, 24, 48, 0.5);
		height: 12vw;
		top: -69vw;
		left: 72vw;
		transform: rotate(85deg);
	}
	#a2{
		position: relative;
		z-index: 15;
		width: 13vw;
		background-color: rgba(57, 159, 17, 0.5);
		height: 12vw;
		top: -92vw;
		left: 70vw;
		transform: rotate(59deg);
	}
	#a3{
		position: relative;
		z-index: 6;
		width: 13vw;
		background-color: rgba(212, 84, 16, 0.5);
		height: 12vw;
		top: -113vw;
		left: 62vw;
		transform: rotate(43deg);
	}
 
 
	</style>
</head>
<body>
	<img src="images/fond2.gif">
	<div id='a0'>aaa</div>
	<div id='a1'>aaa</div>
	<div id='a2'>bbb</div>
	<div id='a3'>bbb</div>
 
</body>
</html>

Donc en plaçant les div une à une manuellement j'arrive au résultat escompté, mais je voudrais générer les div dynamiquement.
Je souhaitais donc savoir si il y avait une solution pour les placer dynamiquement en cercle avec la bonne orientation.

**NoSmoking** · 19/10/2014, 18h27

Bonjour,

...mais je voudrais générer les div dynamiquement.

passe dans ce cas par du javascript.

**rvm31** · 21/10/2014, 22h59

merci nosmoking, je comptais effectivement passé par du JS ou du PHP pour générer les div dans la page, mais comment faire pour les positionner comme je le souhaite. L'intérêt de la construction dynamique est de pouvoir automatiser le processus. Mais il faudrait que je puisse génére aussi les positions top et left automatiquement. Je ne suis pas vraiment matheux, je ne vois pas donc pas la formule qu'il faudrait appliquer. Mais j'imagine que sur ce forum il y a des gens qui matrisent les maths

, et qui auraient une idée du calcul à appliquer