Dessiner une cible avec css

Version imprimable

06/12/2015, 11h22
fredericmarcel

Dessiner une cible avec css

J'ai dessiné les éléments qui composent la cible.
Je ne sais pas comment les centrer les cercles par taille à l'intérieur du plus grand cercle.

http://jsfiddle.net/fredericmarcel/k9nzowko/13/

Merci de votre aide.

Bonjour,

1/ pour qu'ils se superposent, il faut déjà les définir en position: absolute;.
Le div englobant étant en position: relative;.
puis faire les décalages en fonctions des diamètres top: xxx; left: yyy;.

Code:

1
2
3
4
5
6
<div class="cible">
  <div class="cercle cercle1"></div>
  <div class="cercle cercle2"></div> 
  <div class="cercle cercle3"></div> 
  <div class="cercle centre"></div>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.cible { position:relative; }
.cercle {
 position:absolute;
 border-radius: 50%;
 background: #00FF00;
 border: 2px solid black;
}
.cercle1 {
 top:0; left:0;
  width:150px; height:150px;
}
.cercle2 {
 top:25px; left:25px;
 width: 100px; height: 100px;
}
.cercle3 {
 top:50px; left:50px;
 width: 50px; height: 50px;
}
.centre {
 top:70px; left:70px;
 width: 10px; height:10px;
}

2/ Qu'on peut encore simplifier :

Code:

1
2
3
4
5
6
<div class="cible">
  <div></div>
  <div></div> 
  <div></div> 
  <div></div>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.cible { position:relative; }
.cible div {
 position:absolute;
 border-radius: 50%;
 background: #00FF00;
 border: 2px solid black;
}
.cible div:nth-child(1) {
 top:0; left:0; width:150px; height:150px;
}
.cible div:nth-child(2) {
 top:25px; left:25px; width: 100px; height: 100px;
}
.cible div:nth-child(3) {
 top:50px; left:50px; width: 50px; height: 50px;
}
.cible div:nth-child(4) {
 top:70px; left:70px; width: 10px; height:10px;
}

3/ on peut aussi définir les dimensions en pourcentages :

Code:

1
2
3
4
5
6
7
<div class="cible">
  <div></div>
  <div></div> 
  <div></div> 
  <div></div>
  <div></div>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.cible { position:relative; width:150px; height:150px; }
.cible div {
 position:absolute;
 border-radius: 50%;
 background: #00FF00;
 border: 2px solid black;
}
.cible div:nth-child(1) {
 top:0; left:0; width:100%; height:100%;
}
.cible div:nth-child(2) {
 top:12.5%; left:12.5%; width: 75%; height: 75%;
}
.cible div:nth-child(3) {
 top:25%; left:25%; width: 50%; height: 50%;
}
.cible div:nth-child(4) {
 top:37.5%; left:37.5%; width: 25%; height:25%;
}
.cible div:nth-child(5) {
 top:49%; left:49%; width: 2%; height:2%;
}

N.B. j'ai rajouté le rond central ;)

Et si je veux une cible plus grande (ou plus petite), je n'ai qu'à modifier cette ligne :

Code:

.cible { position:relative; width:300px; height:300px; }

3/ aleternet les couleurs de fonds ? No problemo :

Code:

1
2
3
.cible div:nth-child(even) {
 background: yellow;
}

4/ On peut mêm y placer des flechettes ! http://jsfiddle.net/zybz5u89

Code:

1
2
3
4
5
6
7
8
9
10
<div class="cible">
  <div></div>
  <div></div> 
  <div></div> 
  <div></div>
  <div></div>
  <span style="top:32%; left:71%;"></span>
  <span style="top:56%; left:37%;"></span>
  <span style="top:63%; left:82%;"></span>
</div>

Code:

1
2
3
4
5
6
7
.cible span { /* fléchette */
 position:absolute;
 border-radius: 50%;
 background: red;
 border: 2px solid black;
 width: 4%; height:4%;
}

Bonjour,
une autre approche
• Structure imbriquée:

Code:

1
2
3
4
5
6
7
8
<div id="cercle">
  <div>
    <div>
      <div>
      </div>
    </div>
  </div>
</div>

• CSS à développer

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
#cercle,
#cercle div {
  width: 13em;
  height: 13em;
  box-sizing: border-box;
  border-radius: 50%;
  padding: .75em;
  border: .75em solid black;
}
#cercle div {    /* reset height et width */
  height:100%;
  width:100%;
}

06/12/2015, 12h54
fredericmarcel

Cette cible est presque parfaite :

http://jsfiddle.net/fredericmarcel/cwms8pwp/1/

Est-il possible de

1- colorer le centre en noir ?

2- diminuer le diamètre du centre

2- espacer régulièrement les centres avec un fond vert

J'ai essayé d'insérer une image de la cible que j'utiisais sur flash, mais le téléchargement ne semble pas fonctionner sur mon pc.
06/12/2015, 13h34
Invité

Oui.
06/12/2015, 14h21
fredericmarcel

C'est vrai

http://jsfiddle.net/fredericmarcel/9f8acjpr/7/
06/12/2015, 14h45
fredericmarcel

Comment centrer la cible horizontalement ?
J'ai tout essayé : je baisse les bras. Rien ne semble marcher. :arf:

http://jsfiddle.net/fredericmarcel/9f8acjpr/8/
06/12/2015, 16h29
Invité

Code:

margin:0 auto;

Tu l'aurais trouvé facilement en consultant la FAQ CSS : Comment centrer horizontalement n'importe quel élément en CSS ?
06/12/2015, 20h11
CCyrillus

Pour le fun http://jsfiddle.net/k9nzowko/15/

et pour infos,

posez les mêmes questions sur plusieurs forum n'est pas forcement bien vu, en tout ça incite a passer a une autre question.
Ne confond pas bénévolat et force de travail gratuite.
Ait au moins la politesse de partager et remettre à jours tes topics identiques.

L'apprentissage, html/css, n'est pas bien long et tu y gagnera en temps et énergie :)
++.
06/12/2015, 20h31
fredericmarcel

Désolé.
Je suis tellement submergé que je panique un peu.
Message reçu : je ne poserai plus les mêmes questions sur plusieurs forums, c'est promis.

Ta cible est très élégante. Merci.