pascal.lafourcade
/
swish
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Formes

Browse Source
Golfier
frperalde 4 years ago
parent 31dc915899
commit 793d4aad2c
4 changed files with 1195 additions and 213 deletions
Show Stats Download Patch File Download Diff File

216
SwichGIT/Doc/Etudes formes/index.html
Unescape View File

@ -4,10 +4,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>SwishGame</title> <title>SwishGame</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head> </head>
<body> <body>
<!-- Forme : rond--> <!-- Forme : rond-->
<div class="containform"> <div class="containform">
<div class="anneau"> <div class="anneau">
@ -97,6 +100,7 @@
<br> <br>
<div class="containform"> <div class="containform">
<div class="trianglerinterieur"></div> <div class="trianglerinterieur"></div>
<div class="triangle"></div> <div class="triangle"></div>
@ -107,7 +111,7 @@
</div> </div>
<div class="containform2"> <div class="containform2">
<div class="trianglerinterieur"></div> <div class="trianglerinterieur2"></div>
</div> </div>
<div class="containform"> <div class="containform">
@ -129,37 +133,221 @@
<div class="containform2"> <div class="containform2">
<div class="triangle"> <div class="triangle">
<div class="ptriangle"></ <div class="ptriangle"></div>
</div>
</div>
<br>
<div class="containform">
<div class="croixinté">
<div class="croixgaucheinte"></div>
<div class="croixdroiteinte"></div>
</div>
<div class="croix">
<div class="croixgauche"></div>
<div class="croixdroite"></div>
</div>
</div>
<div class="containform">
<div class="croixinté">
<div class="croixgaucheinte2"></div>
<div class="croixdroiteinte2"></div>
</div>
</div>
<div class="containform2">
<div class="croix">
<div class="croixgauche2"></div>
<div class="croixdroite2"></div>
</div>
</div>
<div class="containform">
<div class="croix">
<div class="croixgauche"></div>
<div class="croixdroite"></div>
</div>
</div>
<div class="containform2">
<div class="croix">
<div class="croixgauche2"></div>
<div class="croixdroite2"></div>
</div>
</div>
<div class="containform">
<div class="croixinté">
<div class="croixgaucheinte"></div>
<div class="croixdroiteinte"></div>
</div>
<div class="croix">
<div class="croixgauche"></div>
<div class="croixdroite"></div>
</div>
</div>
<div class="containform">
<div class="croixinté">
<div class="croixgaucheinte2"></div>
<div class="croixdroiteinte2"></div>
</div>
</div>
<div class="containform2">
<div class="croixinté">
<div class="croixgaucheinte2"></div>
<div class="croixdroiteinte2"></div>
</div>
<div class="croix">
<div class="croixgauche"></div>
<div class="croixdroite"></div>
</div>
</div>
<br>
<div class="containform">
<div class="losangehautinte"></div>
<div class="losangebasinte"></div>
<div class="losangehaut"></div>
<div class="losangebas"></div>
</div>
<div class="containform">
<div class="losangehautinte2"></div>
<div class="losangebasinte2"></div>
</div>
<div class="containform2">
<div class="losangehaut2"></div>
<div class="losangebas2"></div>
</div>
<div class="containform">
<div class="losangehaut"></div>
<div class="losangebas"></div>
</div>
<div class="containform2">
<div class="losangehaut2"></div>
<div class="losangebas2"></div>
</div>
<div class="containform">
<div class="losangehautinte"></div>
<div class="losangebasinte"></div>
<div class="losangehaut"></div>
<div class="losangebas"></div>
</div>
<div class="containform">
<div class="losangehautinte2"></div>
<div class="losangebasinte2"></div>
</div>
<div class="containform2">
<div class="losangehaut"></div>
<div class="losangebas"></div>
<div class="losangehautinte2"></div>
<div class="losangebasinte2"></div>
<div class="losangehaut2"></div>
<div class="losangebas2"></div>
</div>
<br>
<div class="containform">
<div class="trapezeinte"></div>
<div class="trapeze"></div>
</div> </div>
<div class="containform">
<div class="trapezeinte2"></div>
</div> </div>
<div class="containform2">
<div class="trapeze2"></div>
</div>
<div class="containform">
<div class="trapeze"></div>
</div>
<!-- <div class="containform2">
<div class="trapeze2"></div>
</div>
<div class="containform"> <div class="containform">
<div class="triangletrapezeinte"></div>
<div class="trapezeinte"></div> <div class="trapezeinte"></div>
<div class="triangletrapeze"></div>
<div class="trapeze"></div> <div class="trapeze"></div>
</div> </div>
<div class="containform"> <div class="containform">
<div class="triangletrapezep"></div> <div class="trapezeinte2"></div>
<div class="trapezep"></div>
</div> </div>
<div class="containform2">
<div class="containform"> <div class="containform">
<div class="losangephaut"></div> <div class="trapezeinte2"></div>
<div class="losangepbas"></div> <div class="trapeze"></div>
<div class="losangephauti"></div> </div>
<div class="losangepbasi"></div> </div>
<br>
<div class="containform">
<div class="octogoninte"></div>
<div class="octogon"></div>
</div> </div>
<div class="containform"> <div class="containform">
<div class="losangephautc"></div> <div class="octogoninte2"></div>
<div class="losangepbasc"></div> </div>
-->
<div class="containform2">
<div class="octogon2"></div>
</div>
<div class="containform">
<div class="octogon"></div>
</div>
<div class="containform2">
<div class="octogon2"></div>
</div>
<div class="containform">
<div class="octogoninte"></div>
<div class="octogon"></div>
</div>
<div class="containform">
<div class="octogoninte2"></div>
</div>
<div class="containform2">
<div class="octogoninte2"></div>
<div class="octogon"></div>
</div>
<br>
<button onclick="add()">+</button>
<div id="value">0</div>
</body> </body>
</html> </html>

23
SwichGIT/Doc/Etudes formes/script.js
Unescape View File

@ -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;
}

309
SwichGIT/Doc/Etudes formes/style.css
Unescape View File

@ -2,19 +2,10 @@
--couleur : black; --couleur : black;
--couleurfond : white; --couleurfond : white;
/*Dimensions*/ /*Dimensions*/
--x : 10vw; --x : 5vw;
--y : 8vw; /*taille anneau*/ --y : 4vw; /*taille anneau*/
--z : 5vw; /*taille rond*/ --z : 3vw; /*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);
} }
/*Rond*/ /*Rond*/
.containform { .containform {
@ -23,8 +14,16 @@
width: var(--x); width: var(--x);
display: table-cell; display: table-cell;
vertical-align: middle; 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 { .anneau {
position: relative; position: relative;
left: calc((var(--x) - var(--y)) / 2); left: calc((var(--x) - var(--y)) / 2);
@ -70,14 +69,6 @@
width: var(--z); width: var(--z);
border-radius: 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 { .rond2 {
display: table; display: table;
margin: 0 auto; margin: 0 auto;
@ -183,14 +174,25 @@
border-right: calc(var(--y) /2) solid transparent; border-right: calc(var(--y) /2) solid transparent;
border-bottom: var(--y) solid var(--couleur); border-bottom: var(--y) solid var(--couleur);
} }
.trianglerinterieur { .trianglerinterieur {
position: absolute; 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); left : calc((var(--x) - var(--z))/2);
border-left: calc(var(--z) /2) solid transparent; border-left: calc(var(--z) /2) solid transparent;
border-right: calc(var(--z) /2) solid transparent; border-right: calc(var(--z) /2) solid transparent;
border-bottom: var(--z) solid var(--couleurfond); border-bottom: var(--z) solid var(--couleurfond);
} }
.ptriangle { .ptriangle {
position: absolute; position: absolute;
top : calc((var(--x) - var(--z))/2); top : calc((var(--x) - var(--z))/2);
@ -199,6 +201,7 @@
border-right: calc(var(--z) /2) solid transparent; border-right: calc(var(--z) /2) solid transparent;
border-bottom: var(--z) solid var(--couleur); border-bottom: var(--z) solid var(--couleur);
} }
.triangle2 { .triangle2 {
display: table; display: table;
margin: 0 auto; margin: 0 auto;
@ -207,20 +210,272 @@
border-bottom: var(--y) solid var(--couleurfond); 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);
}

800
SwichGIT/Doc/Forme.md
Unescape View File

@ -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. 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 ```css
#containform { .containform {
height: var(--x); height: var(--x);
width: var(--x); width: var(--x);
display: table-cell; display: table-cell;
vertical-align: middle; 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 ## Etude du cercle
@ -67,6 +96,7 @@ En HTML pour coder les formes ci-dessus :
<div class="rondinterieur"></div> <div class="rondinterieur"></div>
</div> </div>
</div> </div>
<div class="containform"> <div class="containform">
<div class="rond"></div> <div class="rond"></div>
</div> </div>
@ -74,42 +104,31 @@ En HTML pour coder les formes ci-dessus :
Code forme anneau : Code forme anneau :
```css ```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 { .anneau {
position: relative;
left: calc((var(--x) - var(--y)) / 2);
background-color: var(--couleur); background-color: var(--couleur);
border-radius: var(--x); border-radius: var(--y);
height: var(--x); height: var(--y);
width: var(--x); width: var(--y);
/*Centrer les éléments intérieurs verticalement*/
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
.rondinterieur { .rondinterieur {
background-color: var(--couleurfond); background-color: var(--couleurfond);
height: var(--d); height: var(--z);
width: var(--d); width: var(--z);
/*Centrer horizontalement*/
display: table; display: table;
margin: 0 auto; margin: 0 auto;
/*Faire un arondie*/ border-radius: var(--z);
border-radius: var(--d);
} }
.rond { .rond {
/*Centrer horizontalement*/
display: table; display: table;
margin: 0 auto; margin: 0 auto;
/*Définir la couleur*/
background-color: var(--couleur); background-color: var(--couleur);
height: var(--d); height: var(--z);
width: var(--d); width: var(--z);
border-radius: var(--d); border-radius: var(--z);
} }
``` ```
@ -126,106 +145,85 @@ Code HTML :
<div class="containform2"> <div class="containform2">
<div class="rond2"></div> <div class="rond2"></div>
</div> </div>
<div class="containform"> <div class="containform">
<div class="rond"></div> <div class="rond"></div>
</div> </div>
``` ```
Code CSS : Code CSS :
```css ```css
.containform2{
height: var(--x);
width: var(--x);
display: table-cell;
vertical-align: middle;
background-color: var(--couleur);
}
.rond2 { .rond2 {
display: table; display: table;
margin: 0 auto; margin: 0 auto;
background-color: var(--couleurfond); background-color: var(--couleurfond);
height: var(--d); height: var(--z);
width: var(--d); width: var(--z);
border-radius: var(--d); border-radius: var(--z);
} }
``` ```
### Version 3 ### Version 3
Pour la version 3, nous assemblons les idée du dessous de façon à obtenir cette idée : 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. Pour différencier chacunes des formes, nous réduisons le diamètre à chaque fois.
```HTML ```HTML
<div class="containform2"> <div class="containform2">
<div class="anneau2"></div> <div class="anneau2"></div>
</div> </div>
<div class="containform"> <div class="containform">
<div class="anneau3"> <div class="anneau3">
<div class="rond3"></div> <div class="rond3"></div>
</div> </div>
</div> </div>
<div class="containform"> <div class="containform">
<div class="rond4"></div> <div class="rond4"></div>
</div> </div>
``` ```
Code CSS : Code CSS :
```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 { .anneau2 {
position: relative; position: relative;
background-color: var(--couleurfond); background-color: var(--couleurfond);
border-radius: var(--d1); border-radius: var(--y);
height: var(--d1); height: var(--y);
width: var(--d1); width: var(--y);
calc((var(--x) - var(--d1))/2); left : calc((var(--x) - var(--y))/2);
/*Centrer verticalement les div contenu dans cette div*/
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
.anneau3 { .anneau3 {
position: relative; position: relative;
background-color: var(--couleur); background-color: var(--couleur);
border-radius: var(--d2); border-radius: var(--y);
height: var(--d2); height: var(--y);
width: var(--d2); width: var(--y);
/*Centrer horizontalement*/
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.rond3 { .rond3 {
position: relative; position: relative;
top : calc(var(--x) - var(--d2)); top : calc((var(--y) - var(--z))/ 2);
left : calc(var(--x) - var(--d2)); left : calc((var(--y) - var(--z))/2);
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
background-color: var(--couleurfond); background-color: var(--couleurfond);
height: var(--d); height: var(--z);
width: var(--d); width: var(--z);
border-radius: var(--d); border-radius: var(--z);
} }
.rond4 { .rond4 {
display: table; display: table;
margin: 0 auto; margin: 0 auto;
background-color: var(--couleur); background-color: var(--couleur);
height: var(--d3); height: var(--z);
width: var(--d3); width: var(--z);
border-radius: var(--d3); border-radius: var(--z);
} }
``` ```
--- ---
@ -255,45 +253,28 @@ En HTML pour coder les formes ci-dessus :
Code CSS pour le carré : Code CSS pour le carré :
```css ```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 { .carre {
position: relative; position: relative;
background-color: var(--couleur); background-color: var(--couleur);
height: var(--basecarre); height: var(--y);
width: var(--basecarre); width: var(--y);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.carreinterieur { .carreinterieur {
position: relative; position: relative;
top : calc((var(--basecarre) - var(--b2))/2); top : calc((var(--y) - var(--z))/2);
left : calc((var(--basecarre) - var(--b2))/2); left : calc((var(--y) - var(--z))/2);
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
background-color: var(--couleurfond); background-color: var(--couleurfond);
height: var(--b2); height: var(--z);
width: var(--b2); width: var(--z);
} }
.carre2 { .carre2 {
background-color: var(--couleur); background-color: var(--couleur);
height: var(--b2); height: var(--z);
width: var(--b2); width: var(--z);
display: table; display: table;
margin: 0 auto; margin: 0 auto;
} }
@ -309,6 +290,7 @@ En HTML pour coder les formes ci-dessus :
<div class="containform2"> <div class="containform2">
<div class="carreinterieur2"></div> <div class="carreinterieur2"></div>
</div> </div>
<div class="containform"> <div class="containform">
<div class="carre2"></div> <div class="carre2"></div>
</div> </div>
@ -316,30 +298,14 @@ En HTML pour coder les formes ci-dessus :
Code CSS pour le carré : Code CSS pour le carré :
```css ```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 { .carreinterieur2 {
background-color: var(--couleurfond); background-color: var(--couleurfond);
height: var(--b2); height: var(--z);
width: var(--b2); width: var(--z);
display: table; display: table;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
``` ```
### Version 3 ### Version 3
@ -351,11 +317,13 @@ En HTML pour coder les formes ci-dessus :
<div class="containform2"> <div class="containform2">
<div class="carreinterieur3"></div> <div class="carreinterieur3"></div>
</div> </div>
<div class="containform"> <div class="containform">
<div class="carrev2"> <div class="carrev2">
<div class="carreinterieur4"></div> <div class="carreinterieur4"></div>
</div> </div>
</div> </div>
<div class="containform"> <div class="containform">
<div class="carre3"></div> <div class="carre3"></div>
</div> </div>
@ -363,57 +331,37 @@ En HTML pour coder les formes ci-dessus :
Code CSS pour le carré : Code CSS pour le carré :
```css ```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 { .carreinterieur3 {
position: relative; position: relative;
background-color: var(--couleurfond); background-color: var(--couleurfond);
height: var(--basecarre); height: var(--y);
width: var(--basecarre); width: var(--y);
left : calc((var(--x) - var(--basecarre))/2); left : calc((var(--x) - var(--y))/2);
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
.carrev2 { .carrev2 {
position: relative; position: relative;
background-color: var(--couleur); background-color: var(--couleur);
height: var(--b3); height: var(--y);
width: var(--b3); width: var(--y);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.carreinterieur4 { .carreinterieur4 {
position : relative; position : relative;
top : calc((var(--x) - var(--basecarre)) / 1.3); top : calc((var(--y) - var(--z)) / 2);
left : calc((var(--x) - var(--basecarre)) / 1.3); left : calc((var(--y) - var(--z)) / 2);
background-color: var(--couleurfond); background-color: var(--couleurfond);
height: var(--d); height: var(--z);
width: var(--d); width: var(--z);
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
.carre3 { .carre3 {
background-color: var(--couleur); background-color: var(--couleur);
height: var(--b4); height: var(--z);
width: var(--b4); width: var(--z);
display: table; display: table;
margin: 0 auto; margin: 0 auto;
} }
@ -422,3 +370,571 @@ Code CSS pour le carré :
## Etude du triangle ## Etude du triangle
### Version 1 ### Version 1
En HTML pour coder les formes ci-dessus :
```HTML
<div class="containform">
<div class="trianglerinterieur"></div>
<div class="triangle"></div>
</div>
<div class="containform">
<div class="ptriangle"></div>
</div>
```
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
<div class="containform2">
<div class="trianglerinterieur2"></div>
</div>
<div class="containform">
<div class="ptriangle"></div>
</div>
```
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
<div class="containform2">
<div class="triangle2"></div>
</div>
<div class="containform">
<div class="trianglerinterieur"></div>
<div class="triangle"></div>
</div>
<div class="containform">
<div class="ptriangle"></div>
</div>
```
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
<div class="containform">
<div class="croixinté">
<div class="croixgaucheinte"></div>
<div class="croixdroiteinte"></div>
</div>
<div class="croix">
<div class="croixgauche"></div>
<div class="croixdroite"></div>
</div>
</div>
<div class="containform">
<div class="croixinté">
<div class="croixgaucheinte2"></div>
<div class="croixdroiteinte2"></div>
</div>
</div>
```
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
<div class="containform2">
<div class="croix">
<div class="croixgauche2"></div>
<div class="croixdroite2"></div>
</div>
</div>
<div class="containform">
<div class="croix">
<div class="croixgauche"></div>
<div class="croixdroite"></div>
</div>
</div>
```
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
<div class="containform2">
<div class="croix">
<div class="croixgauche2"></div>
<div class="croixdroite2"></div>
</div>
</div>
<div class="containform">
<div class="croixinté">
<div class="croixgaucheinte"></div>
<div class="croixdroiteinte"></div>
</div>
<div class="croix">
<div class="croixgauche"></div>
<div class="croixdroite"></div>
</div>
</div>
<div class="containform">
<div class="croixinté">
<div class="croixgaucheinte2"></div>
<div class="croixdroiteinte2"></div>
</div>
</div>
```
---
## Etude du losange
### Version 1
En HTML pour coder les formes ci-dessus :
```HTML
<div class="containform">
<div class="losangehautinte"></div>
<div class="losangebasinte"></div>
<div class="losangehaut"></div>
<div class="losangebas"></div>
</div>
<div class="containform">
<div class="losangehautinte2"></div>
<div class="losangebasinte2"></div>
</div>
```
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
<div class="containform2">
<div class="losangehaut2"></div>
<div class="losangebas2"></div>
</div>
<div class="containform">
<div class="losangehaut"></div>
<div class="losangebas"></div>
</div>
```
```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
<div class="containform2">
<div class="losangehaut2"></div>
<div class="losangebas2"></div>
</div>
<div class="containform">
<div class="losangehautinte"></div>
<div class="losangebasinte"></div>
<div class="losangehaut"></div>
<div class="losangebas"></div>
</div>
<div class="containform">
<div class="losangehautinte2"></div>
<div class="losangebasinte2"></div>
</div>
```
---
## Etude du pentagone
### Version 1
En HTML pour coder les formes ci-dessus :
```HTML
<div class="containform">
<div class="trapezeinte"></div>
<div class="trapeze"></div>
</div>
<div class="containform">
<div class="trapezeinte2"></div>
</div>
```
```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
<div class="containform2">
<div class="trapeze2"></div>
</div>
<div class="containform">
<div class="trapeze"></div>
</div>
```
```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
<div class="containform2">
<div class="trapeze2"></div>
</div>
<div class="containform">
<div class="trapezeinte"></div>
<div class="trapeze"></div>
</div>
<div class="containform">
<div class="trapezeinte2"></div>
</div>
```
---
## Etude du octogone
### Version 1
En HTML pour coder les formes ci-dessus :
```HTML
<div class="containform">
<div class="octogoninte"></div>
<div class="octogon"></div>
</div>
<div class="containform">
<div class="octogoninte2"></div>
</div>
```
```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
<div class="containform2">
<div class="octogon2"></div>
</div>
<div class="containform">
<div class="octogon"></div>
</div>
```
```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
<div class="containform2">
<div class="octogon2"></div>
</div>
<div class="containform">
<div class="octogoninte"></div>
<div class="octogon"></div>
</div>
<div class="containform">
<div class="octogoninte2"></div>
</div>
```
```

Write Preview
Loading…
Cancel
Save