diff --git a/SwichGIT/Doc/Forme.md b/SwichGIT/Doc/Forme.md index 3848ef1..cfdc7db 100644 --- a/SwichGIT/Doc/Forme.md +++ b/SwichGIT/Doc/Forme.md @@ -8,25 +8,24 @@ - [Etude du cercle](#Etude-du-cercle) - [Etude du carré](#Etude-du-carré) - [Etude du triangle](#Etude-du-triangle) - - [Etude du pentagone](#Etude-du-pentagone) - [Etude du losange](#Etude-du-losange) + - [Etude du pentagone](#Etude-du-pentagone) --- ## Explications -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 : ```css -#containform -{ - box-sizing: content-box; - height: 100; - width: 100; - display: table-cell; - vertical-align: middle; +#containform { + height: var(--x); + width: var(--x); + 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 rond qui représente la partie intérieur manquante - - -Code forme anneau : -```css -#anneau -{ - background-color: #DE3030; - border-radius: 3vw; - display: table-cell; - vertical-align: middle; -} - -#rondinterieur -{ - background-color: var(--lightsedonca); - display: table; - margin: 0 auto; - border-radius: 3vw; +En HTML pour coder un rond, nous partons d'une div simple (un quadrilatère) : +```HTML +
+``` +Et en CSS nous définissons +```CSS +.rond { + //centrer la division + display: table; + margin: 0 auto; + //définir la couleur + background-color: #FFD100; + //définir la taille + height: 3vw; + width: 3vw; + //définir un arondie à notre div + 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). - ---- -## 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 +### Version 1 +Notre objectif étant de réaliser la figure suivante : - + Code forme anneau : ```css -#carre -{ - background-color: #DE3030; - display: table-cell; - vertical-align: middle; +:root{ + /*Valeur à changer en fonction*/ + --x : 6vw; + --d : calc(var(--x_longueur)/2); + --e : calc(var(--x_longueur)/4); } -#carreinterieur -{ - background-color: var(--lightsedonca); - display: table; - margin: 0 auto; +.anneau { + background-color: #FFD100; + border-radius: var(--x); + height: var(--x); + width: var(--x); + /*Centrer les éléments intérieurs verticalement*/ + display: table-cell; + vertical-align: middle; +} +.rondinterieur { + background-color: white; + height: var(--d); + width: var(--d); + /*Centrer horizontalement*/ + display: table; + margin: 0 auto; + /*Faire un arondie*/ + border-radius: var(--d); +} +.rond { + /*Centrer horizontalement*/ + display: table; + margin: 0 auto; + /*Définir la couleur*/ + background-color: #FFD100; + height: var(--d); + width: var(--d); + border-radius: var(--d); } ``` -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). - ---- -## 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 - - +Pour résumer, le rond intérieur va se centrer au milieu de l'anneau. +### Version 2 +Notre objectif étant de réaliser la figure suivante : -| Nom | Triangle Extérieur | Triangle intérieur | -|:-: |:-: |:-: | -| Calculs côtés |AB = 100 Notons F = (1/2)AB Soit AF = 50 et FC = 100