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">
<title>SwishGame</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<!-- Forme : rond-->
<div class="containform">
<div class="anneau">
@ -97,6 +100,7 @@
<br>
<div class="containform">
<div class="trianglerinterieur"></div>
<div class="triangle"></div>
@ -107,7 +111,7 @@
</div>
<div class="containform2">
<div class="trianglerinterieur"></div>
<div class="trianglerinterieur2"></div>
</div>
<div class="containform">
@ -129,37 +133,221 @@
<div class="containform2">
<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 class="containform">
<div class="trapezeinte2"></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="triangletrapezeinte"></div>
<div class="trapezeinte"></div>
<div class="triangletrapeze"></div>
<div class="trapeze"></div>
</div>
<div class="containform">
<div class="triangletrapezep"></div>
<div class="trapezep"></div>
<div class="trapezeinte2"></div>
</div>
<div class="containform2">
<div class="containform">
<div class="losangephaut"></div>
<div class="losangepbas"></div>
<div class="losangephauti"></div>
<div class="losangepbasi"></div>
<div class="trapezeinte2"></div>
<div class="trapeze"></div>
</div>
</div>
<br>
<div class="containform">
<div class="octogoninte"></div>
<div class="octogon"></div>
</div>
<div class="containform">
<div class="losangephautc"></div>
<div class="losangepbasc"></div>
-->
<div class="octogoninte2"></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>
</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;
--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);
}

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.
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 :
<div class="rondinterieur"></div>
</div>
</div>
<div class="containform">
<div class="rond"></div>
</div>
@ -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 :
<div class="containform2">
<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: 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);
}
```
### 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
<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>
```
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*/
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*/
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));
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);
}
```
---
@ -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);
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;
}
@ -309,6 +290,7 @@ En HTML pour coder les formes ci-dessus :
<div class="containform2">
<div class="carreinterieur2"></div>
</div>
<div class="containform">
<div class="carre2"></div>
</div>
@ -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 :
<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>
@ -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);
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;
}
@ -422,3 +370,571 @@ Code CSS pour le carré :
## Etude du triangle
### 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