From 69bad5ceb35f598ed71f2eff1a836dd7119329c0 Mon Sep 17 00:00:00 2001
From: frperalde <francois.peralde@gmail.com>
Date: Sun, 22 Nov 2020 14:44:06 +0100
Subject: [PATCH] Formes

---
 SwichGIT/Doc/Etudes formes/index.html |  82 ++++++-
 SwichGIT/Doc/Etudes formes/style.css  | 174 +++++++++++++-
 SwichGIT/Doc/Forme.md                 | 323 +++++++++++++++++++++++---
 3 files changed, 534 insertions(+), 45 deletions(-)

diff --git a/SwichGIT/Doc/Etudes formes/index.html b/SwichGIT/Doc/Etudes formes/index.html
index 168490a..d440e6a 100644
--- a/SwichGIT/Doc/Etudes formes/index.html	
+++ b/SwichGIT/Doc/Etudes formes/index.html	
@@ -11,7 +11,7 @@
 			<!-- Forme : rond-->
 			<div class="containform">
 				<div class="anneau">
-					<div class="rondinterieur inté"></div>
+					<div class="rondinterieur"></div>
 				</div>
 			</div>
 			<div class="containform">
@@ -30,26 +30,96 @@
 				<div class="anneau2"></div>
 			</div>
 
+			<div class="containform">
+				<div class="anneau3">
+					<div class="rond3"></div>
+				</div>
+			</div>
+			<div class="containform">
+				<div class="rond4"></div>
+			</div>
 
-			<!--
+
+
+			<div class="containform2">
+				<div class="anneau2">
+					<div class="anneau3">
+						<div class="rond3">
+							<div class="rond4"></div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<br>
+
+
+
+
+
+
+
+
+			
 			<div class="containform">
 				<div class="carre">
-					<div class="carreinterieur inté"></div>
+					<div class="carreinterieur"></div>
 				</div>
 			</div>
+			
+			<div class="containform">
+				<div class="carre2"></div>
+			</div>
+
+			<div class="containform2">
+				<div class="carreinterieur2"></div>
+			</div>
+
 			<div class="containform">
-				<div class="pcarre"></div>
+				<div class="carre2"></div>
+			</div>
+
+			<div class="containform2">
+				<div class="carreinterieur3"></div>
 			</div>
 
 			<div class="containform">
-				<div class="triangle">
-					<div class="trianglerinterieur"></div>
+				<div class="carrev2">
+					<div class="carreinterieur4"></div>
 				</div>
 			</div>
+
+			<div class="containform">
+				<div class="carre3"></div>
+			</div>
+
+			<div class="containform2">
+				<div class="carreinterieur3">
+					<div class="carrev2">
+						<div class="carreinterieur4">
+							<div class="carre3"></div>	
+						</div>
+					</div>
+				</div>
+			</div>
+
+
+
+
+
+			<br>
+			<div class="containform">
+				<div class="trianglerinterieur"></div>
+				<div class="triangle"></div>
+			</div>
+			<!--
 			<div class="containform">
 				<div class="ptriangle"></div>
 			</div>
 
+
+			
+
 			<div class="containform">
 				<div class="triangletrapezeinte"></div>
 				<div class="trapezeinte"></div>
diff --git a/SwichGIT/Doc/Etudes formes/style.css b/SwichGIT/Doc/Etudes formes/style.css
index b15b9d9..b764f61 100644
--- a/SwichGIT/Doc/Etudes formes/style.css	
+++ b/SwichGIT/Doc/Etudes formes/style.css	
@@ -1,9 +1,27 @@
 :root{
-	--x : 6vw;
+	--couleur : black;
+	--couleurfond : white;
+	--x : 10vw;
 	--d : calc(var(--x)/2);
+	--l : calc(var(--x)/2);
 	--e : calc(var(--x)/4);
+	--d1 : calc(var(--x)/1.1);
+	--d2 : calc(var(--x)/1.2);
+	--d3 : calc(var(--x)/2.4);	
+	/*carre*/
+	--basecarre : calc(var(--x)/1.2);
+	--b2 : calc(var(--x)/2);
+	--b3 : calc(var(--x)/1.3);
+	--b4 : calc(var(--x)/2.4);
+	/*triangle*/
+	--btriangle : var(--x);
+	--contour1 : calc(var(--btriangle) / 2);
+	--bptriange : calc(var(--btriangle) / 2);
+	--contour2 : calc(var(--bptriange) / 2);
 }
 
+/*Rond*/
+
 .containform {
     height: var(--x);
     width: var(--x);
@@ -12,7 +30,7 @@
 }
 
 .anneau {
-    background-color: #FFD100;
+    background-color: var(--couleur);
     border-radius: var(--x);
     height: var(--x);
     width: var(--x);
@@ -21,16 +39,28 @@
 }
 
 .anneau2 {
-    background-color: white;
-    border-radius: var(--x);
-    height: var(--x);
-    width: var(--x);
+	position: relative;
+    background-color: var(--couleurfond);
+    border-radius: var(--d1);
+    height: var(--d1);
+    width: var(--d1);
+    left : calc((var(--x) - var(--d1))/2);
     display: table-cell;
     vertical-align: middle;
 }
 
+.anneau3 {
+	position: relative;
+    background-color: var(--couleur);
+    border-radius: var(--d2);
+    height: var(--d2);
+    width: var(--d2);
+    margin-left: auto;
+    margin-right: auto;
+}
+
 .rondinterieur {
-    background-color: white;
+    background-color: var(--couleurfond);
     height: var(--d);
     width: var(--d);
     display: table;
@@ -40,7 +70,7 @@
 .rond {
     display: table;
     margin: 0 auto;
-    background-color: #FFD100;
+    background-color: var(--couleur);
     height: var(--d);
     width: var(--d);
     border-radius: var(--d);
@@ -51,16 +81,140 @@
     width: var(--x);
     display: table-cell;
     vertical-align: middle;
-    background-color: #FFD100;
+    background-color: var(--couleur);
 }
 
 .rond2 {
 	display: table;
     margin: 0 auto;
-    background-color: white;
+    background-color: var(--couleurfond);
+    height: var(--d);
+    width: var(--d);
+    border-radius: var(--d);
+}
+
+.rond3 {
+	position: relative;
+	top : calc(var(--x) - var(--d2));
+	left : calc(var(--x) - var(--d2));
+	display: table-cell;
+    vertical-align: middle;
+    background-color: var(--couleurfond);
     height: var(--d);
     width: var(--d);
     border-radius: var(--d);
+
+}
+
+.rond4 {
+	display: table;
+    margin: 0 auto;
+    background-color: var(--couleur);
+    height: var(--d3);
+    width: var(--d3);
+    border-radius: var(--d3);
+}
+
+
+/*Carré*/
+.carre {
+    position: relative;
+    background-color: var(--couleur);
+    height: var(--basecarre);
+    width: var(--basecarre);
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.carreinterieur {
+    position: relative;
+	top : calc((var(--basecarre) - var(--b2))/2);
+	left : calc((var(--basecarre) - var(--b2))/2);
+	display: table-cell;
+    vertical-align: middle;
+    background-color: var(--couleurfond);
+    height: var(--b2);
+    width: var(--b2);
+}
+
+.carre2 {
+    background-color: var(--couleur);
+    height: var(--b2);
+    width: var(--b2);
+    display: table;
+    margin: 0 auto;
+}
+
+.carreinterieur2 {
+    background-color: var(--couleurfond);
+    height: var(--b2);
+    width: var(--b2);
+    display: table;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.carreinterieur3 {
+	position: relative;
+    background-color: var(--couleurfond);
+    height: var(--basecarre);
+    width: var(--basecarre);
+    left : calc((var(--x) - var(--basecarre))/2);
+    display: table-cell;
+    vertical-align: middle;
+}
+
+.carrev2 {
+	position: relative;
+    background-color: var(--couleur);
+    height: var(--b3);
+    width: var(--b3);
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.carreinterieur4 {
+	position : relative;
+	top : calc((var(--x) - var(--basecarre)) / 1.3);
+	left : calc((var(--x) - var(--basecarre)) / 1.3);
+    background-color: var(--couleurfond);
+    height: var(--d);
+    width: var(--d);
+    display: table-cell;
+    vertical-align: middle;
+}
+
+
+.carre3 {
+    background-color: var(--couleur);
+    height: var(--b4);
+    width: var(--b4);
+    display: table;
+    margin: 0 auto;
+}
+
+/*triangle*/
+.triangle {
+    display: table;
+    margin: 0 auto;
+    border-left: var(--contour1) solid transparent;
+    border-right: var(--contour1) solid transparent;
+    border-bottom: var(--btriangle) solid var(--couleur);
+}
+.trianglerinterieur {
+	position: absolute;
+	left: calc(var(--contour1) - (var(--contour2) - 0.4vw));
+    border-left: var(--contour2) solid transparent;
+    border-right: var(--contour2) solid transparent;
+    border-bottom: var(--bptriange) solid var(--couleurfond);
+}
+.ptriangle {
+    display: table;
+    margin: 0 auto;
+    margin-top: 0.75vw;
+    border-left: 1.5vw solid transparent;
+    border-right: 1.5vw solid transparent;
+    border-bottom: 3vw solid var(--couleur);
 }
 
 
diff --git a/SwichGIT/Doc/Forme.md b/SwichGIT/Doc/Forme.md
index cfdc7db..1297887 100644
--- a/SwichGIT/Doc/Forme.md
+++ b/SwichGIT/Doc/Forme.md
@@ -42,15 +42,15 @@ En HTML pour coder un rond, nous partons d'une div simple (un quadrilatère) :
 Et en CSS nous définissons
 ```CSS
 .rond {
-    //centrer la division
+    /*centrer la division*/
     display: table;
     margin: 0 auto;
-    //définir la couleur
+    /*définir la couleur*/
     background-color: #FFD100;
-    //définir la taille
+    /*définir la taille*/
     height: 3vw;
     width: 3vw;
-    //définir un arondie à notre div
+    /*définir un arondie à notre div*/
     border-radius: 3vw;
 }
 ```
@@ -60,17 +60,30 @@ Notre objectif étant de réaliser la figure suivante :
 
 ![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/779749908038156333/unknown.png "Image rond")
 
+En HTML pour coder les formes ci-dessus :
+```HTML
+<div class="containform">
+	<div class="anneau">
+		<div class="rondinterieur"></div>
+	</div>
+</div>
+<div class="containform">
+  <div class="rond"></div>
+</div>
+```
+
 Code forme anneau :
 ```css
 :root{
+  --couleur : black;
+  --couleurfond : white;
 	/*Valeur à changer en fonction*/
   --x : 6vw;
   --d : calc(var(--x_longueur)/2);
   --e : calc(var(--x_longueur)/4);
 }
-
 .anneau {
-    background-color: #FFD100;
+    background-color: var(--couleur);
     border-radius: var(--x);
     height: var(--x);
     width: var(--x);
@@ -79,7 +92,7 @@ Code forme anneau :
     vertical-align: middle;
 }
 .rondinterieur {
-    background-color: white;
+    background-color: var(--couleurfond);
     height: var(--d);
     width: var(--d);
     /*Centrer horizontalement*/
@@ -93,7 +106,7 @@ Code forme anneau :
     display: table;
     margin: 0 auto;
     /*Définir la couleur*/
-    background-color: #FFD100;
+    background-color: var(--couleur);
     height: var(--d);
     width: var(--d);
     border-radius: var(--d);
@@ -105,55 +118,307 @@ 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 :
 
-![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/779754348908642324/unknown.png "Image rond")
+![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/779768320752091146/unknown.png "Image rond")
 
 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
 <div class="containform2">
-		<div class="rond2"></div>
+	<div class="rond2"></div>
+</div>
+<div class="containform">
+	<div class="rond"></div>
 </div>
 ```
 Code CSS :
 ```css
 .containform2{
-	height: var(--x);
-    width: var(--x);
-    display: table-cell;
-    vertical-align: middle;
-    background-color: #FFD100;
+  height: var(--x);
+  width: var(--x);
+  display: table-cell;
+  vertical-align: middle;
+  background-color: var(--couleur);
 }
 
 .rond2 {
-	display: table;
-    margin: 0 auto;
-    background-color: white;
-    height: var(--d);
-    width: var(--d);
-    border-radius: var(--d);
+  display: table;
+  margin: 0 auto;
+  background-color: var(--couleurfond);
+  height: var(--d);
+  width: var(--d);
+  border-radius: var(--d);
 }
 ```
 
 ### Version 3
 Pour la version 3, nous assemblons les idée du dessous de façon à obtenir cette idée :
 
-![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/779759566187003904/unknown.png "Image rond")
-Il faut alors coder la forme de gauche
+![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/779768865382072340/unknown.png "Image rond")
+Pour différencier chacunes des formes, nous réduisons le diamètre à chaque fois.
+
 ```HTML
 <div class="containform2">
-  <div class="anneau2"></div>
+	<div class="anneau2"></div>
+</div>
+<div class="containform">
+	<div class="anneau3">
+		<div class="rond3"></div>
+	</div>
+</div>
+<div class="containform">
+	<div class="rond4"></div>
 </div>
 ```
 Code CSS :
 ```css
+:root{
+	/*Valeur à changer en fonction*/
+  --couleur : #FFD100;
+	--couleurfond : white;
+  --x : 6vw;
+  --d : calc(var(--x)/2);
+  --d1 : calc(var(--x)/1.15);
+  --d2 : calc(var(--x)/1,25);
+  --d3 : calc(var(--x)/2,15);
+  --e : calc(var(--x)/4);
+}
+
 .anneau2 {
-    background-color: white;
-    border-radius: var(--x);
-    height: var(--x);
-    width: var(--x);
+	position: relative;
+  background-color: var(--couleurfond);
+  border-radius: var(--d1);
+  height: var(--d1);
+  width: var(--d1);
+  calc((var(--x) - var(--d1))/2);
+  /*Centrer verticalement les div contenu dans cette div*/
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.anneau3 {
+	position: relative;
+  background-color: var(--couleur);
+  border-radius: var(--d2);
+  height: var(--d2);
+  width: var(--d2);
+  /*Centrer horizontalement*/
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.rond3 {
+  position: relative;
+  top : calc(var(--x) - var(--d2));
+  left : calc(var(--x) - var(--d2));
+  display: table-cell;
+  vertical-align: middle;
+  background-color: var(--couleurfond);
+  height: var(--d);
+  width: var(--d);
+  border-radius: var(--d);
+}
+
+.rond4 {
+  display: table;
+  margin: 0 auto;
+  background-color: var(--couleur);
+  height: var(--d3);
+  width: var(--d3);
+  border-radius: var(--d3);
+}
+```
+
+---
+
+## 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
+
+![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/780037455859941436/unknown.png "Image carré")
+
+En HTML pour coder les formes ci-dessus :
+```HTML
+<div class="containform">
+	<div class="carre">
+		<div class="carreinterieur"></div>
+	</div>
+</div>
+
+<div class="containform">
+	<div class="carre2"></div>
+</div>
+```
+
+Code CSS pour le carré :
+```css
+:root{
+  /*Valeur à changer en fonction*/
+  --couleur : black;
+  --couleurfond : white;
+  --x : 6vw;
+  --d : calc(var(--x)/2);
+  --l : calc(var(--x)/2);
+  --e : calc(var(--x)/4);
+  --d1 : calc(var(--x)/1.15);
+  --d2 : calc(var(--x)/1,25);
+  --d3 : calc(var(--x)/2,15);
+  --basecarre : calc(var(--x)/1.2);
+  --b2 : calc(var(--x)/2);
+}
+
+.carre{
+  position: relative;
+  background-color: var(--couleur);
+  height: var(--basecarre);
+  width: var(--basecarre);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.carreinterieur{
+  position: relative;
+ top : calc((var(--basecarre) - var(--b2))/2);
+ left : calc((var(--basecarre) - var(--b2))/2);
+ display: table-cell;
+ vertical-align: middle;
+ background-color: var(--couleurfond);
+ height: var(--b2);
+ width: var(--b2);
+}
+
+.carre2 {
+    background-color: var(--couleur);
+    height: var(--b2);
+    width: var(--b2);
+    display: table;
+    margin: 0 auto;
+}
+
+```
+
+### Version 2
+
+![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/780036552255471646/unknown.png "Image carré")
+
+En HTML pour coder les formes ci-dessus :
+```HTML
+<div class="containform2">
+	<div class="carreinterieur2"></div>
+</div>
+<div class="containform">
+	<div class="carre2"></div>
+</div>
+```
+
+Code CSS pour le carré :
+```css
+:root{
+  /*Valeur à changer en fonction*/
+  --couleur : black;
+  --couleurfond : white;
+  --x : 6vw;
+  --d : calc(var(--x)/2);
+  --l : calc(var(--x)/2);
+  --e : calc(var(--x)/4);
+  --d1 : calc(var(--x)/1.15);
+  --d2 : calc(var(--x)/1,25);
+  --d3 : calc(var(--x)/2,15);
+  --basecarre : calc(var(--x)/1.2);
+  --b2 : calc(var(--x)/2);
+}
+
+.carreinterieur2 {
+    background-color: var(--couleurfond);
+    height: var(--b2);
+    width: var(--b2);
+    display: table;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+```
+
+### Version 3
+
+![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/780041515745411102/unknown.png "Image carré")
+
+En HTML pour coder les formes ci-dessus :
+```HTML
+<div class="containform2">
+	<div class="carreinterieur3"></div>
+</div>
+<div class="containform">
+	<div class="carrev2">
+		<div class="carreinterieur4"></div>
+	</div>
+</div>
+<div class="containform">
+	<div class="carre3"></div>
+</div>
+```
+
+Code CSS pour le carré :
+```css
+:root{
+  /*Valeur à changer en fonction*/
+  --couleur : black;
+  --couleurfond : white;
+  --x : 6vw;
+  --d : calc(var(--x)/2);
+  --l : calc(var(--x)/2);
+  --e : calc(var(--x)/4);
+  --d1 : calc(var(--x)/1.15);
+  --d2 : calc(var(--x)/1,25);
+  --d3 : calc(var(--x)/2,15);
+  --basecarre : calc(var(--x)/1.2);
+  --b2 : calc(var(--x)/2);
+  --b3 : calc(var(--x)/1.3);
+  --b4 : calc(var(--x)/2.4);
+}
+
+.carreinterieur3 {
+	position: relative;
+    background-color: var(--couleurfond);
+    height: var(--basecarre);
+    width: var(--basecarre);
+    left : calc((var(--x) - var(--basecarre))/2);
     display: table-cell;
     vertical-align: middle;
 }
+
+.carrev2 {
+	position: relative;
+    background-color: var(--couleur);
+    height: var(--b3);
+    width: var(--b3);
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.carreinterieur4 {
+	position : relative;
+	top : calc((var(--x) - var(--basecarre)) / 1.3);
+	left : calc((var(--x) - var(--basecarre)) / 1.3);
+  background-color: var(--couleurfond);
+  height: var(--d);
+  width: var(--d);
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.carre3 {
+    background-color: var(--couleur);
+    height: var(--b4);
+    width: var(--b4);
+    display: table;
+    margin: 0 auto;
+}
 ```
+---
+## Etude du 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.
+### Version 1