From 4d7b1328de75c9bc3c789dd40ba1c4914ed78fa3 Mon Sep 17 00:00:00 2001
From: frperalde <francois.peralde@gmail.com>
Date: Mon, 23 Nov 2020 08:02:37 +0100
Subject: [PATCH] formes

---
 SwichGIT/Doc/Etudes formes/index.html |  39 +++-
 SwichGIT/Doc/Etudes formes/style.css  | 163 ++++++-------
 SwichGIT/Doc/Forme.md                 | 323 +++-----------------------
 3 files changed, 133 insertions(+), 392 deletions(-)

diff --git a/SwichGIT/Doc/Etudes formes/index.html b/SwichGIT/Doc/Etudes formes/index.html
index d440e6a..948f387 100644
--- a/SwichGIT/Doc/Etudes formes/index.html	
+++ b/SwichGIT/Doc/Etudes formes/index.html	
@@ -53,14 +53,6 @@
 
 			<br>
 
-
-
-
-
-
-
-
-			
 			<div class="containform">
 				<div class="carre">
 					<div class="carreinterieur"></div>
@@ -104,21 +96,46 @@
 			</div>
 
 
+			<br>
+			<div class="containform">
+				<div class="trianglerinterieur"></div>
+				<div class="triangle"></div>
+			</div>
+		
+			<div class="containform">
+				<div class="ptriangle"></div>
+			</div>
+
+			<div class="containform2">
+				<div class="trianglerinterieur"></div>
+			</div>
 
+			<div class="containform">
+				<div class="ptriangle"></div>
+			</div>
 
+			<div class="containform2">
+				<div class="triangle2"></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="containform2">
+				<div class="triangle">
+					<div class="ptriangle"></
+				</div>
+			</div>
+
 
-			
+
+				<!--
 
 			<div class="containform">
 				<div class="triangletrapezeinte"></div>
diff --git a/SwichGIT/Doc/Etudes formes/style.css b/SwichGIT/Doc/Etudes formes/style.css
index ecf27c1..34f536e 100644
--- a/SwichGIT/Doc/Etudes formes/style.css	
+++ b/SwichGIT/Doc/Etudes formes/style.css	
@@ -1,18 +1,13 @@
 :root{
 	--couleur : black;
 	--couleurfond : white;
+	/*Dimensions*/
 	--x : 10vw;
+	--y : 8vw; /*taille anneau*/
+	--z : 5vw; /*taille rond*/
 	--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);
@@ -23,173 +18,159 @@
 /*Rond*/
 
 .containform {
+	position: relative;
     height: var(--x);
     width: var(--x);
     display: table-cell;
     vertical-align: middle;
-    background-color: grey;
+    background-color: red;
 }
-
 .anneau {
+	position: relative;
+	left: calc((var(--x) - var(--y)) / 2);
     background-color: var(--couleur);
-    border-radius: var(--x);
-    height: var(--x);
-    width: var(--x);
+    border-radius: var(--y);
+    height: var(--y);
+    width: var(--y);
     display: table-cell;
     vertical-align: middle;
 }
-
 .anneau2 {
 	position: relative;
     background-color: var(--couleurfond);
-    border-radius: var(--d1);
-    height: var(--d1);
-    width: var(--d1);
-    left : calc((var(--x) - var(--d1))/2);
+    border-radius: var(--y);
+    height: var(--y);
+    width: var(--y);
+    left : calc((var(--x) - var(--y))/2);
     display: table-cell;
     vertical-align: middle;
 }
-
 .anneau3 {
 	position: relative;
     background-color: var(--couleur);
-    border-radius: var(--d2);
-    height: var(--d2);
-    width: var(--d2);
+    border-radius: var(--y);
+    height: var(--y);
+    width: var(--y);
     margin-left: auto;
     margin-right: auto;
 }
-
 .rondinterieur {
     background-color: var(--couleurfond);
-    height: var(--d);
-    width: var(--d);
+    height: var(--z);
+    width: var(--z);
     display: table;
     margin: 0 auto;
-    border-radius: var(--d);
+    border-radius: var(--z);
 }
 .rond {
     display: table;
     margin: 0 auto;
     background-color: var(--couleur);
-    height: var(--d);
-    width: var(--d);
-    border-radius: var(--d);
+    height: var(--z);
+    width: var(--z);
+    border-radius: var(--z);
 }
-
 .containform2{
+	position: relative;
 	height: var(--x);
     width: var(--x);
     display: table-cell;
     vertical-align: middle;
     background-color: var(--couleur);
 }
-
 .rond2 {
 	display: table;
     margin: 0 auto;
     background-color: var(--couleurfond);
-    height: var(--d);
-    width: var(--d);
-    border-radius: var(--d);
+    height: var(--z);
+    width: var(--z);
+    border-radius: var(--z);
 }
-
 .rond3 {
 	position: relative;
-	top : calc(var(--x) - var(--d2));
-	left : calc(var(--x) - var(--d2));
+	top : calc((var(--y) - var(--z))/ 2);
+	left : calc((var(--y) - var(--z))/2);
 	display: table-cell;
     vertical-align: middle;
     background-color: var(--couleurfond);
-    height: var(--d);
-    width: var(--d);
-    border-radius: var(--d);
-
+    height: var(--z);
+    width: var(--z);
+    border-radius: var(--z);
 }
-
 .rond4 {
 	display: table;
     margin: 0 auto;
     background-color: var(--couleur);
-    height: var(--d3);
-    width: var(--d3);
-    border-radius: var(--d3);
+    height: var(--z);
+    width: var(--z);
+    border-radius: var(--z);
 }
 
-
 /*Carré*/
 .carre {
     position: relative;
     background-color: var(--couleur);
-    height: var(--basecarre);
-    width: var(--basecarre);
+    height: var(--y);
+    width: var(--y);
     margin-left: auto;
     margin-right: auto;
 }
-
 .carreinterieur {
     position: relative;
-	top : calc((var(--basecarre) - var(--b2))/2);
-	left : calc((var(--basecarre) - var(--b2))/2);
+	top : calc((var(--y) - var(--z))/2);
+	left : calc((var(--y) - var(--z))/2);
 	display: table-cell;
     vertical-align: middle;
     background-color: var(--couleurfond);
-    height: var(--b2);
-    width: var(--b2);
+    height: var(--z);
+    width: var(--z);
 }
-
 .carre2 {
     background-color: var(--couleur);
-    height: var(--b2);
-    width: var(--b2);
+    height: var(--z);
+    width: var(--z);
     display: table;
     margin: 0 auto;
 }
-
 .carreinterieur2 {
     background-color: var(--couleurfond);
-    height: var(--b2);
-    width: var(--b2);
+    height: var(--z);
+    width: var(--z);
     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);
+    height: var(--y);
+    width: var(--y);
+    left : calc((var(--x) - var(--y))/2);
     display: table-cell;
     vertical-align: middle;
 }
-
 .carrev2 {
 	position: relative;
     background-color: var(--couleur);
-    height: var(--b3);
-    width: var(--b3);
+    height: var(--y);
+    width: var(--y);
     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);
+	top : calc((var(--y) - var(--z)) / 2);
+	left : calc((var(--y) - var(--z)) / 2);
     background-color: var(--couleurfond);
-    height: var(--d);
-    width: var(--d);
+    height: var(--z);
+    width: var(--z);
     display: table-cell;
     vertical-align: middle;
 }
-
-
 .carre3 {
     background-color: var(--couleur);
-    height: var(--b4);
-    width: var(--b4);
+    height: var(--z);
+    width: var(--z);
     display: table;
     margin: 0 auto;
 }
@@ -198,24 +179,32 @@
 .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);
+    border-left: calc(var(--y) /2) solid transparent;
+    border-right: calc(var(--y) /2) solid transparent;
+    border-bottom: var(--y) 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);
+	top : calc((var(--x) - var(--z))/1.6);
+	left : calc((var(--x) - var(--z))/2);
+	border-left: calc(var(--z) /2) solid transparent;
+    border-right: calc(var(--z) /2) solid transparent;
+    border-bottom: var(--z) solid var(--couleurfond);
 }
 .ptriangle {
+	position: absolute;
+	top : calc((var(--x) - var(--z))/2);
+	left : calc((var(--x) - var(--z))/2);
+	border-left: calc(var(--z) /2) solid transparent;
+    border-right: calc(var(--z) /2) solid transparent;
+    border-bottom: var(--z) solid var(--couleur);
+}
+.triangle2 {
     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);
+    border-left: calc(var(--y) /2) solid transparent;
+    border-right: calc(var(--y) /2) solid transparent;
+    border-bottom: var(--y) solid var(--couleurfond);
 }
 
 
diff --git a/SwichGIT/Doc/Forme.md b/SwichGIT/Doc/Forme.md
index 1297887..cfdc7db 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,30 +60,17 @@ 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: var(--couleur);
+    background-color: #FFD100;
     border-radius: var(--x);
     height: var(--x);
     width: var(--x);
@@ -92,7 +79,7 @@ Code forme anneau :
     vertical-align: middle;
 }
 .rondinterieur {
-    background-color: var(--couleurfond);
+    background-color: white;
     height: var(--d);
     width: var(--d);
     /*Centrer horizontalement*/
@@ -106,7 +93,7 @@ Code forme anneau :
     display: table;
     margin: 0 auto;
     /*Définir la couleur*/
-    background-color: var(--couleur);
+    background-color: #FFD100;
     height: var(--d);
     width: var(--d);
     border-radius: var(--d);
@@ -118,307 +105,55 @@ 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/779768320752091146/unknown.png "Image rond")
+![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/779754348908642324/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>
-<div class="containform">
-	<div class="rond"></div>
+		<div class="rond2"></div>
 </div>
 ```
 Code CSS :
 ```css
 .containform2{
-  height: var(--x);
-  width: var(--x);
-  display: table-cell;
-  vertical-align: middle;
-  background-color: var(--couleur);
+	height: var(--x);
+    width: var(--x);
+    display: table-cell;
+    vertical-align: middle;
+    background-color: #FFD100;
 }
 
 .rond2 {
-  display: table;
-  margin: 0 auto;
-  background-color: var(--couleurfond);
-  height: var(--d);
-  width: var(--d);
-  border-radius: var(--d);
+	display: table;
+    margin: 0 auto;
+    background-color: white;
+    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/779768865382072340/unknown.png "Image rond")
-Pour différencier chacunes des formes, nous réduisons le diamètre à chaque fois.
-
+![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/779759566187003904/unknown.png "Image rond")
+Il faut alors coder la forme de gauche
 ```HTML
 <div class="containform2">
-	<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 class="anneau2"></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 {
-	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);
+    background-color: white;
+    border-radius: var(--x);
+    height: var(--x);
+    width: var(--x);
     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
 
-### Version 1
+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.