diff --git a/SwichGIT/Doc/Etudes formes/index.html b/SwichGIT/Doc/Etudes formes/index.html index 948f387..b64afe2 100644 --- a/SwichGIT/Doc/Etudes formes/index.html +++ b/SwichGIT/Doc/Etudes formes/index.html @@ -4,10 +4,13 @@ SwishGame + + +
@@ -97,6 +100,7 @@
+
@@ -107,7 +111,7 @@
-
+
@@ -129,37 +133,221 @@
-
+
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+
- +
+
+
+ +
+
+
+ +
+
+
+
+ +
+ + +
0
+ + + + + + + + + + + + diff --git a/SwichGIT/Doc/Etudes formes/script.js b/SwichGIT/Doc/Etudes formes/script.js new file mode 100644 index 0000000..c08c9bd --- /dev/null +++ b/SwichGIT/Doc/Etudes formes/script.js @@ -0,0 +1,23 @@ +var y = getComputedStyle(document.documentElement).getPropertyValue('--y'); +var z = getComputedStyle(document.documentElement).getPropertyValue('--z'); +t = z[1]; +t = parseInt(t); +u = y[1]; +u = parseInt(u); + +function add(){ + txt = document.getElementById("value"); + p = t - 0.1; + //alert(p); + txt.textContent = p; + document.documentElement.style.setProperty('--z', p + "vw"); + t = p; + +} + + + + + + + diff --git a/SwichGIT/Doc/Etudes formes/style.css b/SwichGIT/Doc/Etudes formes/style.css index 34f536e..21fa26b 100644 --- a/SwichGIT/Doc/Etudes formes/style.css +++ b/SwichGIT/Doc/Etudes formes/style.css @@ -2,19 +2,10 @@ --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); - - /*triangle*/ - --btriangle : var(--x); - --contour1 : calc(var(--btriangle) / 2); - --bptriange : calc(var(--btriangle) / 2); - --contour2 : calc(var(--bptriange) / 2); + --x : 5vw; + --y : 4vw; /*taille anneau*/ + --z : 3vw; /*taille rond*/ } - /*Rond*/ .containform { @@ -23,8 +14,16 @@ width: var(--x); display: table-cell; vertical-align: middle; - background-color: red; } +.containform2{ + position: relative; + height: var(--x); + width: var(--x); + display: table-cell; + vertical-align: middle; + background-color: var(--couleur); +} + .anneau { position: relative; left: calc((var(--x) - var(--y)) / 2); @@ -70,14 +69,6 @@ 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; @@ -183,14 +174,25 @@ border-right: calc(var(--y) /2) solid transparent; border-bottom: var(--y) solid var(--couleur); } + .trianglerinterieur { position: absolute; - top : calc((var(--x) - var(--z))/1.6); + bottom: calc(((var(--x) - var(--y))/2) + ((var(--y) - var(--z))/3)); + 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); +} + +.trianglerinterieur2 { + position: absolute; + bottom: 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(--couleurfond); } + .ptriangle { position: absolute; top : calc((var(--x) - var(--z))/2); @@ -199,6 +201,7 @@ border-right: calc(var(--z) /2) solid transparent; border-bottom: var(--z) solid var(--couleur); } + .triangle2 { display: table; margin: 0 auto; @@ -207,20 +210,272 @@ border-bottom: var(--y) solid var(--couleurfond); } +.croix{ + position: absolute; + left: calc((var(--x) - var(--y)) / 2); + bottom: calc( ((var(--x) - var(--y))/2) + ((var(--y)) / 4) ); +} +.croixinté{ + z-index: 2; + position: absolute; + left: calc((var(--x) - var(--z))/2); + bottom: calc( ((var(--x) - var(--z))/2) + ((var(--z)) / 2.33) ); +} +.croixgauche{ + position: relative; + background-color: var(--couleur); + height: calc(var(--y)/4); + width: var(--y); + top : calc(var(--y) / 8); + transform: rotate(45deg); +} +.croixdroite{ + position: relative; + background-color: var(--couleur); + height: calc(var(--y)/4); + width: var(--y); + bottom : calc(var(--y) / 8); + transform: rotate(-45deg); +} +.croixgauche2{ + position: relative; + background-color: var(--couleurfond); + height: calc(var(--y)/4); + width: var(--y); + top : calc(var(--y) / 8); + transform: rotate(45deg); +} +.croixdroite2{ + position: relative; + background-color: var(--couleurfond); + height: calc(var(--y)/4); + width: var(--y); + bottom : calc(var(--y) / 8); + transform: rotate(-45deg); +} +.croixgaucheinte{ + position: relative; + background-color: var(--couleurfond); + height: calc(var(--z)/16); + width: calc(var(--z)); + top : calc(var(--z) / 32); + transform: rotate(45deg); +} +.croixdroiteinte{ + position: relative; + background-color: var(--couleurfond); + height: calc(var(--z)/16); + width: calc(var(--z)); + bottom : calc(var(--z) / 32); + transform: rotate(-45deg); +} +.croixgaucheinte2{ + position: relative; + background-color: var(--couleur); + height: calc(var(--z)/16); + width: calc(var(--z)); + top : calc(var(--z) / 32); + transform: rotate(45deg); +} +.croixdroiteinte2{ + position: relative; + background-color: var(--couleur); + height: calc(var(--z)/16); + width: calc(var(--z)); + bottom : calc(var(--z) / 32); + transform: rotate(-45deg); +} +.losangehaut { + z-index: 2; + position: absolute; + left: calc((var(--x) - var(--y)) / 2.4); + bottom : calc(var(--x) / 2); + border-left: calc(var(--y) /1.9) solid transparent; + border-right: calc(var(--y) /1.9) solid transparent; + border-bottom: calc(var(--y) /1.9) solid var(--couleur); +} +.losangebas { + position: absolute; + z-index: 2; + left: calc((var(--x) - var(--y)) / 2.4); + top : calc(var(--x) / 2); + border-left: calc(var(--y) /1.9) solid transparent; + border-right: calc(var(--y) /1.9) solid transparent; + border-top: calc(var(--y) /1.9) solid var(--couleur); +} +.losangehaut2 { + position: absolute; + left: calc((var(--x) - var(--y)) / 2); + bottom : calc(var(--x) / 2); + border-left: calc(var(--y) /2) solid transparent; + border-right: calc(var(--y) /2) solid transparent; + border-bottom: calc(var(--y) /2) solid var(--couleurfond); +} +.losangebas2 { + position: absolute; + left: calc((var(--x) - var(--y)) / 2); + top : calc(var(--x) / 2); + border-left: calc(var(--y) /2) solid transparent; + border-right: calc(var(--y) /2) solid transparent; + border-top: calc(var(--y) /2) solid var(--couleurfond); +} +.losangehautinte { + z-index: 3; + position: absolute; + left: calc((var(--x) - var(--z))/2); + bottom : calc(var(--x) / 2); + border-left: calc(var(--z) /2) solid transparent; + border-right: calc(var(--z) /2) solid transparent; + border-bottom: calc(var(--z) /2) solid var(--couleurfond); +} +.losangebasinte { + z-index: 3; + position: absolute; + left: calc((var(--x) - var(--z))/2); + top : calc(var(--x) / 2); + border-left: calc(var(--z) /2) solid transparent; + border-right: calc(var(--z) /2) solid transparent; + border-top: calc(var(--z) /2) solid var(--couleurfond); +} +.losangehautinte2 { + z-index: 3; + position: absolute; + left: calc((var(--x) - var(--z))/2); + bottom : calc(var(--x) / 2); + border-left: calc(var(--z) /2) solid transparent; + border-right: calc(var(--z) /2) solid transparent; + border-bottom: calc(var(--z) /2) solid var(--couleur); +} +.losangebasinte2 { + z-index: 3; + position: absolute; + left: calc((var(--x) - var(--z))/2); + top : calc(var(--x) / 2); + border-left: calc(var(--z) /2) solid transparent; + border-right: calc(var(--z) /2) solid transparent; + border-top: calc(var(--z) /2) solid var(--couleur); +} +/*Figures simples :( */ +.trapeze{ + width: var(--y); + height: var(--y); + background: var(--couleur); + position: relative; + left: calc((var(--x) - var(--y)) / 2); + clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); +} +.trapeze2{ + width: var(--y); + height: var(--y); + background: var(--couleurfond); + position: relative; + left: calc((var(--x) - var(--y)) / 2); + clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); +} +.trapezeinte{ + width: var(--z); + height: var(--z); + background: var(--couleurfond); + position: absolute; + z-index: 2; + bottom : calc( ((var(--x) - var(--z))/2.1)); + left: calc((var(--x) - var(--z))/2); + clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); +} +.trapezeinte2{ + width: var(--z); + height: var(--z); + background: var(--couleur); + position: absolute; + z-index: 2; + bottom : calc( ((var(--x) - var(--z))/2.1)); + left: calc((var(--x) - var(--z))/2); + clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); +} +.octogon{ + width: var(--y); + height: var(--y); + background: var(--couleur); + position: relative; + left: calc((var(--x) - var(--y)) / 2); + clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); +} +.octogon2{ + width: var(--y); + height: var(--y); + background: var(--couleurfond); + position: relative; + left: calc((var(--x) - var(--y)) / 2); + clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); +} +.octogoninte{ + width: var(--z); + height: var(--z); + background: var(--couleurfond); + position: absolute; + z-index: 2; + bottom : calc( ((var(--x) - var(--z))/2.1)); + left: calc((var(--x) - var(--z))/2); + clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); +} +.octogoninte2{ + width: var(--z); + height: var(--z); + background: var(--couleur); + position: absolute; + z-index: 2; + bottom : calc( ((var(--x) - var(--z))/2.1)); + left: calc((var(--x) - var(--z))/2); + clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); +} - - - - - +.value { + border-bottom: 4px dashed #bdc3c7; + text-align: center; + font-weight: bold; + font-size: 10em; + width: 300px; + height: 100px; + line-height: 60px; + margin: 40px auto; + letter-spacing: -.07em; + text-shadow: white 2px 2px 2px; +} +input[type="range"] { + display: block; + -webkit-appearance: none; + background-color: #bdc3c7; + width: 300px; + height: 5px; + border-radius: 5px; + margin: 0 auto; + outline: 0; +} +input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + background-color: #e74c3c; + width: 30px; + height: 30px; + border-radius: 50%; + border: 2px solid white; + cursor: pointer; + transition: .3s ease-in-out; +}​ + input[type="range"]::-webkit-slider-thumb:hover { + background-color: white; + border: 2px solid #e74c3c; + } + input[type="range"]::-webkit-slider-thumb:active { + transform: scale(1.6); + } \ No newline at end of file diff --git a/SwichGIT/Doc/Forme.md b/SwichGIT/Doc/Forme.md index 1297887..9f24fff 100644 --- a/SwichGIT/Doc/Forme.md +++ b/SwichGIT/Doc/Forme.md @@ -17,17 +17,46 @@ 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 : +Ayant 2 divisions, l'une sans fond et l'autre pour une version avec fond. + +Code des divisions : ```css -#containform { +.containform { height: var(--x); width: var(--x); display: table-cell; vertical-align: middle; } +.containform2{ + position: relative; + height: var(--x); + width: var(--x); + display: table-cell; + vertical-align: middle; + background-color: var(--couleur); +} ``` +Il est important de noter que nous allons stocker des variables dans le code css. Nous allons avoir 3 variable : +x : La taille de la division conteneur +y : la taille de la forme conteneur +z : la taille de la forme contenue + +Soit : +```css +:root{ + /*Couleurs*/ + --couleur : black; + --couleurfond : white; + /*Dimensions*/ + --x : 5vw; + --y : 4vw; /*taille anneau*/ + --z : 3vw; /*taille rond*/ +} +``` + + --- ## Etude du cercle @@ -67,6 +96,7 @@ En HTML pour coder les formes ci-dessus :
+
@@ -74,42 +104,31 @@ En HTML pour coder les formes ci-dessus : 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 { + position: relative; + left: calc((var(--x) - var(--y)) / 2); background-color: var(--couleur); - border-radius: var(--x); - height: var(--x); - width: var(--x); - /*Centrer les éléments intérieurs verticalement*/ + border-radius: var(--y); + height: var(--y); + width: var(--y); display: table-cell; vertical-align: middle; } .rondinterieur { background-color: var(--couleurfond); - height: var(--d); - width: var(--d); - /*Centrer horizontalement*/ + height: var(--z); + width: var(--z); display: table; margin: 0 auto; - /*Faire un arondie*/ - border-radius: var(--d); + border-radius: var(--z); } .rond { - /*Centrer horizontalement*/ display: table; margin: 0 auto; - /*Définir la couleur*/ background-color: var(--couleur); - height: var(--d); - width: var(--d); - border-radius: var(--d); + height: var(--z); + width: var(--z); + border-radius: var(--z); } ``` @@ -126,106 +145,85 @@ Code HTML :
+
``` Code CSS : ```css -.containform2{ - 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); + display: table; + margin: 0 auto; + background-color: var(--couleurfond); + height: var(--z); + width: var(--z); + border-radius: var(--z); } ``` ### 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") +![Alt text](https://cdn.discordapp.com/attachments/712609191432290325/782610205258154034/unknown.png "Image rond") Pour différencier chacunes des formes, nous réduisons le diamètre à chaque fois. ```HTML
+
+
``` 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; + background-color: var(--couleurfond); + 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); - /*Centrer horizontalement*/ - margin-left: auto; - margin-right: auto; + background-color: var(--couleur); + border-radius: var(--y); + height: var(--y); + width: var(--y); + 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); + position: relative; + 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(--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); + display: table; + margin: 0 auto; + background-color: var(--couleur); + height: var(--z); + width: var(--z); + border-radius: var(--z); } + ``` --- @@ -255,45 +253,28 @@ En HTML pour coder les formes ci-dessus : 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); +.carre { + position: relative; + background-color: var(--couleur); + height: var(--y); + width: var(--y); + margin-left: auto; + margin-right: auto; +} +.carreinterieur { + position: relative; + 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(--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; } @@ -309,6 +290,7 @@ En HTML pour coder les formes ci-dessus :
+
@@ -316,30 +298,14 @@ En HTML pour coder les formes ci-dessus : 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); + height: var(--z); + width: var(--z); display: table; margin-left: auto; margin-right: auto; } - ``` ### Version 3 @@ -351,11 +317,13 @@ En HTML pour coder les formes ci-dessus :
+
+
@@ -363,57 +331,37 @@ En HTML pour coder les formes ci-dessus : 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); + 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); - background-color: var(--couleurfond); - height: var(--d); - width: var(--d); - display: table-cell; - vertical-align: middle; + top : calc((var(--y) - var(--z)) / 2); + left : calc((var(--y) - var(--z)) / 2); + background-color: var(--couleurfond); + 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; } @@ -422,3 +370,571 @@ Code CSS pour le carré : ## Etude du triangle ### Version 1 + +En HTML pour coder les formes ci-dessus : +```HTML +
+
+
+
+ +
+
+
+``` + +Code CSS pour le carré : +```css +.triangle { + display: table; + margin: 0 auto; + 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; + bottom: calc(((var(--x) - var(--y))/2) + ((var(--y) - var(--z))/3)); + 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); +} +``` + +### Version 2 + +En HTML pour coder les formes ci-dessus : +```HTML +
+
+
+ +
+
+
+``` + +Code CSS pour le carré : +```css +.trianglerinterieur2 { + position: absolute; + bottom: 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(--couleurfond); +} +``` + +### Version 3 + +En HTML pour coder les formes ci-dessus : +```HTML +
+
+
+ +
+
+
+
+ +
+
+
+``` + +Code CSS pour le carré : +```css +.triangle2 { + display: table; + margin: 0 auto; + border-left: calc(var(--y) /2) solid transparent; + border-right: calc(var(--y) /2) solid transparent; + border-bottom: var(--y) solid var(--couleurfond); +} +``` + +--- +## Etude du croix + +### Version 1 + +En HTML pour coder les formes ci-dessus : +```HTML +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+``` + +Code CSS pour le carré : +```css +.croixinté{ + z-index: 2; + position: absolute; + left: calc((var(--x) - var(--z))/2); + bottom: calc(((var(--x) - var(--z))/2) + ((var(--z)) / 2.33)); +} +.croixgaucheinte{ + position: relative; + background-color: var(--couleurfond); + height: calc(var(--z)/16); + width: calc(var(--z)); + top : calc(var(--z) / 32); + transform: rotate(45deg); +} +.croixdroiteinte{ + position: relative; + background-color: var(--couleurfond); + height: calc(var(--z)/16); + width: calc(var(--z)); + bottom : calc(var(--z) / 32); + transform: rotate(-45deg); +} +.croix{ + position: absolute; + left: calc((var(--x) - var(--y)) / 2); + bottom: calc( ((var(--x) - var(--y))/2) + ((var(--y)) / 4) ); +} +.croixgauche{ + position: relative; + background-color: var(--couleur); + height: calc(var(--y)/4); + width: var(--y); + top : calc(var(--y) / 8); + transform: rotate(45deg); +} +.croixdroite{ + position: relative; + background-color: var(--couleur); + height: calc(var(--y)/4); + width: var(--y); + bottom : calc(var(--y) / 8); + transform: rotate(-45deg); +} +.croixgaucheinte2{ + position: relative; + background-color: var(--couleur); + height: calc(var(--z)/16); + width: calc(var(--z)); + top : calc(var(--z) / 32); + transform: rotate(45deg); +} +.croixdroiteinte2{ + position: relative; + background-color: var(--couleur); + height: calc(var(--z)/16); + width: calc(var(--z)); + bottom : calc(var(--z) / 32); + transform: rotate(-45deg); +} +``` + +### Version 2 + +En HTML pour coder les formes ci-dessus : +```HTML +
+
+
+
+
+
+ +
+
+
+
+
+
+``` + +Code CSS pour le carré : +```css +.croixgauche2{ + position: relative; + background-color: var(--couleurfond); + height: calc(var(--y)/4); + width: var(--y); + top : calc(var(--y) / 8); + transform: rotate(45deg); +} +.croixdroite2{ + position: relative; + background-color: var(--couleurfond); + height: calc(var(--y)/4); + width: var(--y); + bottom : calc(var(--y) / 8); + transform: rotate(-45deg); +} +``` + +### Version 3 + +En HTML pour coder les formes ci-dessus : +```HTML +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+``` + +--- +## Etude du losange + +### Version 1 + +En HTML pour coder les formes ci-dessus : +```HTML +
+
+
+
+
+
+ +
+
+
+
+``` + +Code CSS pour le carré : +```css +.losangehautinte { + z-index: 3; + position: absolute; + left: calc((var(--x) - var(--z))/2); + bottom : calc(var(--x) / 2); + border-left: calc(var(--z) /2) solid transparent; + border-right: calc(var(--z) /2) solid transparent; + border-bottom: calc(var(--z) /2) solid var(--couleurfond); +} +.losangebasinte { + z-index: 3; + position: absolute; + left: calc((var(--x) - var(--z))/2); + top : calc(var(--x) / 2); + border-left: calc(var(--z) /2) solid transparent; + border-right: calc(var(--z) /2) solid transparent; + border-top: calc(var(--z) /2) solid var(--couleurfond); +} +.losangehaut { + z-index: 2; + position: absolute; + left: calc((var(--x) - var(--y)) / 2.4); + bottom : calc(var(--x) / 2); + border-left: calc(var(--y) /1.9) solid transparent; + border-right: calc(var(--y) /1.9) solid transparent; + border-bottom: calc(var(--y) /1.9) solid var(--couleur); +} +.losangebas { + position: absolute; + z-index: 2; + left: calc((var(--x) - var(--y)) / 2.4); + top : calc(var(--x) / 2); + border-left: calc(var(--y) /1.9) solid transparent; + border-right: calc(var(--y) /1.9) solid transparent; + border-top: calc(var(--y) /1.9) solid var(--couleur); +} +.losangehautinte2 { + z-index: 3; + position: absolute; + left: calc((var(--x) - var(--z))/2); + bottom : calc(var(--x) / 2); + border-left: calc(var(--z) /2) solid transparent; + border-right: calc(var(--z) /2) solid transparent; + border-bottom: calc(var(--z) /2) solid var(--couleur); +} +.losangebasinte2 { + z-index: 3; + position: absolute; + left: calc((var(--x) - var(--z))/2); + top : calc(var(--x) / 2); + border-left: calc(var(--z) /2) solid transparent; + border-right: calc(var(--z) /2) solid transparent; + border-top: calc(var(--z) /2) solid var(--couleur); +} +``` + +### Version 2 + +En HTML pour coder les formes ci-dessus : +```HTML +
+
+
+
+ +
+
+
+
+``` + +```css +.losangehaut2 { + position: absolute; + left: calc((var(--x) - var(--y)) / 2); + bottom : calc(var(--x) / 2); + border-left: calc(var(--y) /2) solid transparent; + border-right: calc(var(--y) /2) solid transparent; + border-bottom: calc(var(--y) /2) solid var(--couleurfond); +} +.losangebas2 { + position: absolute; + left: calc((var(--x) - var(--y)) / 2); + top : calc(var(--x) / 2); + border-left: calc(var(--y) /2) solid transparent; + border-right: calc(var(--y) /2) solid transparent; + border-top: calc(var(--y) /2) solid var(--couleurfond); +} +``` + +### Version 3 + +En HTML pour coder les formes ci-dessus : +```HTML +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+``` + + +--- +## Etude du pentagone + +### Version 1 + +En HTML pour coder les formes ci-dessus : +```HTML +
+
+
+
+ +
+
+
+``` + +```css +.trapezeinte{ + width: var(--z); + height: var(--z); + background: var(--couleurfond); + position: absolute; + z-index: 2; + bottom : calc( ((var(--x) - var(--z))/2.1)); + left: calc((var(--x) - var(--z))/2); + clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); +} +.trapeze{ + width: var(--y); + height: var(--y); + background: var(--couleur); + position: relative; + left: calc((var(--x) - var(--y)) / 2); + clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); +} +.trapezeinte2{ + width: var(--z); + height: var(--z); + background: var(--couleur); + position: absolute; + z-index: 2; + bottom : calc( ((var(--x) - var(--z))/2.1)); + left: calc((var(--x) - var(--z))/2); + clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); +} +``` + +### Version 2 + +En HTML pour coder les formes ci-dessus : +```HTML +
+
+
+ +
+
+
+``` + +```css +.trapeze2{ + width: var(--y); + height: var(--y); + background: var(--couleurfond); + position: relative; + left: calc((var(--x) - var(--y)) / 2); + clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); +} +``` + +### Version 3 + +En HTML pour coder les formes ci-dessus : +```HTML +
+
+
+ +
+
+
+
+ +
+
+
+``` + +--- +## Etude du octogone + +### Version 1 + +En HTML pour coder les formes ci-dessus : +```HTML +
+
+
+
+ +
+
+
+``` + +```css +.octogoninte{ + width: var(--z); + height: var(--z); + background: var(--couleurfond); + position: absolute; + z-index: 2; + bottom : calc( ((var(--x) - var(--z))/2.1)); + left: calc((var(--x) - var(--z))/2); + clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); +} +.octogon{ + width: var(--y); + height: var(--y); + background: var(--couleur); + position: relative; + left: calc((var(--x) - var(--y)) / 2); + clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); +} +.octogoninte2{ + width: var(--z); + height: var(--z); + background: var(--couleur); + position: absolute; + z-index: 2; + bottom : calc( ((var(--x) - var(--z))/2.1)); + left: calc((var(--x) - var(--z))/2); + clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); +} +``` + +### Version 2 + +En HTML pour coder les formes ci-dessus : +```HTML +
+
+
+ +
+
+
+``` + +```css +.octogon2{ + width: var(--y); + height: var(--y); + background: var(--couleurfond); + position: relative; + left: calc((var(--x) - var(--y)) / 2); + clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); +} +``` + +### Version 3 + +En HTML pour coder les formes ci-dessus : +```HTML +
+
+
+ +
+
+
+
+ +
+
+
+``` + +```