Chaque forme est contenu dans une div carré. Pour simplifier mes calculs, je prends un carré de 100x100 qui permet de calculer facilement par la suite, si nous augmentons ou diminuons la taille de la div.
Chaque forme est contenu dans une div carré. Pour simplifier mes calculs, je prends un carré de longueur X qui permet de calculer facilement par la suite, si nous augmentons ou diminuons la taille de la div.
La division étant définie par :
La division étant définie par :
```css
```css
#containform
#containform {
{
height: var(--x);
box-sizing: content-box;
width: var(--x);
height: 100;
display: table-cell;
width: 100;
vertical-align: middle;
display: table-cell;
vertical-align: middle;
}
}
```
```
---
---
@ -36,98 +35,125 @@ Cette structure contient deux formes :
- Un anneau (composé de 2 ronds) qui représente la partie extérieur
- Un anneau (composé de 2 ronds) qui représente la partie extérieur
- Un rond qui représente la partie intérieur manquante
- Un rond qui représente la partie intérieur manquante
En HTML pour coder un rond, nous partons d'une div simple (un quadrilatère) :
```HTML
Code forme anneau :
<divclass="rond"></div>
```css
```
#anneau
Et en CSS nous définissons
{
```CSS
background-color: #DE3030;
.rond {
border-radius: 3vw;
//centrer la division
display: table-cell;
display: table;
vertical-align: middle;
margin: 0 auto;
}
//définir la couleur
background-color: #FFD100;
#rondinterieur
//définir la taille
{
height: 3vw;
background-color: var(--lightsedonca);
width: 3vw;
display: table;
//définir un arondie à notre div
margin: 0 auto;
border-radius: 3vw;
border-radius: 3vw;
}
}
```
```
Pour résumer, le rond intérieur va se centrer au milieu de l'anneau. Et prendra la couleur définie par la variable "--lightseconda" qui correspond à la couleur de la carte (qui change avec le mode jour/nuit).
### Version 1
Notre objectif étant de réaliser la figure suivante :
---
## Etude du carré
Cette structure contient deux formes :
- Un carré (composé de 2 carré) qui représente la partie extérieur
- Un carré qui représente la partie intérieur manquante
Pour résumer, le carré intérieur va se centrer au milieu du carré. Et prendra la couleur définie par la variable "--lightseconda" qui correspond à la couleur de la carte (qui change avec le mode jour/nuit).
Pour résumer, le rond intérieur va se centrer au milieu de l'anneau.
---
## Etude du triangle
Cette structure contient deux formes :
- Un triangle (composé de 2 triangles) qui représente la partie extérieur
- Un triangle qui représente la partie intérieur manquante
| Calculs côtés |AB = 100 Notons F = (1/2)AB Soit AF = 50 et FC = 100 <br>D'après de théorème de Pythagore :<br> AC² = AF² + FC²<br> AC² = 50²+100²<br> AC² = 12500<br>AC = sqrt(12500) = 111.80<br> ```AC = AB = 111.80``` | Si XY = 50 Notons G = (1/2)XY soit XG = 25 et GZ = 50 <br> D'après de théorème de Pythagore :<br> XZ² = XG²+GZ²<br>XZ² = 25²+50²<br>XZ² = 3125<br>XZ = sqrt(3125) = 55.90<br> ```XZ = YZ = 55.90```|
| Calculs angles | Cos  = AF / AC = 50 / 111.80 <br>Cos  = 0.44722719141<br>```Cos^(-1)A = 63.434°```<br>En suivant la même méthode : <br> ```Cos^(-1) B = 63.434°```<br> ```Cos^(-1) C = 53.132°``` | ```Cos^(-1) X = 63.434°```<br>```Cos^(-1) Y = 63.434°```<br>```Cos^(-1) Z = 53.132° ```|
Ici, nous nous intéressons sur la forme de gauche, car la forme de droite est déhà présenté au dessus.
Code HTML :
```HTML
<divclass="containform2">
<divclass="rond2"></div>
</div>
```
Code CSS :
```css
.containform2{
height: var(--x);
width: var(--x);
display: table-cell;
vertical-align: middle;
background-color: #FFD100;
}
Placement petit triangle :
.rond2 {
Si AC = 111.80 et AB = 100
display: table;
Le petit triangle devra être à 50 de la gauche et 55.9 du bottom.
margin: 0 auto;
background-color: white;
---
height: var(--d);
## Etude du pentagone
width: var(--d);
border-radius: var(--d);
Cette structure contient deux formes :
}
- Un losange (composé de deux triangle) qui représente la partie extérieur
```
- Un losange plus petit (composé de deux triangle également) qui représente la partie intérieur manquante
| Calcul angle du trapèze | Calcul angle du triangle |
|:-: |:-: |
| Pour le triangle EFA : <br>EF = 25 et AF = 50<br>D'après de théorème de Pythagore :<br>EA² = EF²+FA²<br>EA² = 25²+50²<br>EA² = 3125<br>EA = sqrt(3125) = 55.90<br>```L'angle E est de 63.434° et l'angle C est de 63.434°```<br>L'angle A = angle B et la somme des angles d'un trapèze est de 360°. <br>Ainsi : 360 - 63.434 - 63.434 = 233.132<br>Angle A = 223.132/2 = 116.566°<br>```Angle B = Angle A = 116.566°``` | EG = 50 et GD = 50<br>D'après de théorème de Pythagore :<br>ED² = EG² + DG²<br>ED² = 50² + 50²<br>ED² = 5000<br>ED = sqrt(5000) = 70.71<br><br>```Angle E = 45°```<br>```Angle C = 45°```<br>```Angle D = 90° ```|
---
## Etude du losange
Cette structure contient deux formes :
### Version 3
- Un triangle (composé de 2 triangles ) qui représente la partie extérieur
Pour la version 3, nous assemblons les idée du dessous de façon à obtenir cette idée :
- Un triangle (composé de 2 triangles) qui représente la partie intérieur manquante
Pour le calcul des côtés, revoir le pentagone (même triangle).
Pour résumer, nous avons 2 container différents, 2 anneaux différents et deux rond différents. Une version transparente et une version avec une couleur pleine.
frperalde
4 years ago