@ -42,15 +42,15 @@ En HTML pour coder un rond, nous partons d'une div simple (un quadrilatère) :
Et en CSS nous définissons
Et en CSS nous définissons
```CSS
```CSS
.rond {
.rond {
//centrer la division
/*centrer la division*/
display: table;
display: table;
margin: 0 auto;
margin: 0 auto;
//définir la couleur
/*définir la couleur*/
background-color: #FFD100 ;
background-color: #FFD100 ;
//définir la taille
/*définir la taille*/
height: 3vw;
height: 3vw;
width: 3vw;
width: 3vw;
//définir un arondie à notre div
/*définir un arondie à notre div*/
border-radius: 3vw;
border-radius: 3vw;
}
}
```
```
@ -60,17 +60,30 @@ Notre objectif étant de réaliser la figure suivante :
En HTML pour coder les formes ci-dessus :
```HTML
< div class = "containform" >
< div class = "anneau" >
< div class = "rondinterieur" > < / div >
< / div >
< / div >
< div class = "containform" >
< div class = "rond" > < / div >
< / div >
```
Code forme anneau :
Code forme anneau :
```css
```css
:root{
:root{
--couleur : black;
--couleurfond : white;
/*Valeur à changer en fonction*/
/*Valeur à changer en fonction*/
--x : 6vw;
--x : 6vw;
--d : calc(var(--x_longueur)/2);
--d : calc(var(--x_longueur)/2);
--e : calc(var(--x_longueur)/4);
--e : calc(var(--x_longueur)/4);
}
}
.anneau {
.anneau {
background-color: #FFD100 ;
background-color: var(--couleur) ;
border-radius: var(--x);
border-radius: var(--x);
height: var(--x);
height: var(--x);
width: var(--x);
width: var(--x);
@ -79,7 +92,7 @@ Code forme anneau :
vertical-align: middle;
vertical-align: middle;
}
}
.rondinterieur {
.rondinterieur {
background-color: white ;
background-color: var(--couleurfond) ;
height: var(--d);
height: var(--d);
width: var(--d);
width: var(--d);
/*Centrer horizontalement*/
/*Centrer horizontalement*/
@ -93,7 +106,7 @@ Code forme anneau :
display: table;
display: table;
margin: 0 auto;
margin: 0 auto;
/*Définir la couleur*/
/*Définir la couleur*/
background-color: #FFD100
background-color: var(--couleur) ;
height: var(--d);
height: var(--d);
width: var(--d);
width: var(--d);
border-radius: var(--d);
border-radius: var(--d);
@ -105,7 +118,7 @@ Pour résumer, le rond intérieur va se centrer au milieu de l'anneau.
### Version 2
### Version 2
Notre objectif étant de réaliser la figure suivante :
Notre objectif étant de réaliser la figure suivante :
Ici, nous nous intéressons sur la forme de gauche, car la forme de droite est déhà présenté au dessus.
Ici, nous nous intéressons sur la forme de gauche, car la forme de droite est déhà présenté au dessus.
Code HTML :
Code HTML :
@ -113,6 +126,9 @@ Code HTML :
< div class = "containform2" > < div class = "containform2" >
< div class = "rond2" > < / div >
< div class = "rond2" > < / div >
< / div > < / div >
< div class = "containform" >
< div class = "rond" > < / div >
< / div >
```
```
Code CSS :
Code CSS :
```css
```css
@ -121,13 +137,13 @@ Code CSS :
width: var(--x);
width: var(--x);
display: table-cell;
display: table-cell;
vertical-align: middle;
vertical-align: middle;
background-color: #FFD100 ;
background-color: var(--couleur) ;
}
}
.rond2 {
.rond2 {
display: table;
display: table;
margin: 0 auto;
margin: 0 auto;
background-color: white ;
background-color: var(--couleurfond) ;
height: var(--d);
height: var(--d);
width: var(--d);
width: var(--d);
border-radius: var(--d);
border-radius: var(--d);
@ -137,23 +153,272 @@ Code CSS :
### 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 :
Il faut alors coder la forme de gauche
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 = "anneau3" >
< div class = "rond3" > < / div >
< / div >
< / div >
< div class = "containform" >
< div class = "rond4" > < / 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 {
background-color: white;
position: relative;
border-radius: var(--x);
background-color: var(--couleurfond);
height: var(--x);
border-radius: var(--d1);
width: var(--x);
height: var(--d1);
width: var(--d1);
calc((var(--x) - var(--d1))/2);
/*Centrer verticalement les div contenu dans cette div*/
display: table-cell;
vertical-align: middle;
}
.anneau3 {
position: relative;
background-color: var(--couleur);
border-radius: var(--d2);
height: var(--d2);
width: var(--d2);
/*Centrer horizontalement*/
margin-left: auto;
margin-right: auto;
}
.rond3 {
position: relative;
top : calc(var(--x) - var(--d2));
left : calc(var(--x) - var(--d2));
display: table-cell;
vertical-align: middle;
background-color: var(--couleurfond);
height: var(--d);
width: var(--d);
border-radius: var(--d);
}
.rond4 {
display: table;
margin: 0 auto;
background-color: var(--couleur);
height: var(--d3);
width: var(--d3);
border-radius: var(--d3);
}
```
---
## Etude du carré
Cette structure contient deux formes :
- Un carré (composé de 2 carré) qui représente la partie extérieur
- Un carré qui représente la partie intérieur manquante
### Version 1
En HTML pour coder les formes ci-dessus :
```HTML
< div class = "containform" >
< div class = "carre" >
< div class = "carreinterieur" > < / div >
< / div >
< / div >
< div class = "containform" >
< div class = "carre2" > < / div >
< / div >
```
Code CSS pour le carré :
```css
:root{
/*Valeur à changer en fonction*/
--couleur : black;
--couleurfond : white;
--x : 6vw;
--d : calc(var(--x)/2);
--l : calc(var(--x)/2);
--e : calc(var(--x)/4);
--d1 : calc(var(--x)/1.15);
--d2 : calc(var(--x)/1,25);
--d3 : calc(var(--x)/2,15);
--basecarre : calc(var(--x)/1.2);
--b2 : calc(var(--x)/2);
}
.carre{
position: relative;
background-color: var(--couleur);
height: var(--basecarre);
width: var(--basecarre);
margin-left: auto;
margin-right: auto;
}
.carreinterieur{
position: relative;
top : calc((var(--basecarre) - var(--b2))/2);
left : calc((var(--basecarre) - var(--b2))/2);
display: table-cell;
display: table-cell;
vertical-align: middle;
vertical-align: middle;
background-color: var(--couleurfond);
height: var(--b2);
width: var(--b2);
}
.carre2 {
background-color: var(--couleur);
height: var(--b2);
width: var(--b2);
display: table;
margin: 0 auto;
}
}
```
### Version 2
En HTML pour coder les formes ci-dessus :
```HTML
< div class = "containform2" >
< div class = "carreinterieur2" > < / div >
< / div >
< div class = "containform" >
< div class = "carre2" > < / div >
< / div >
```
```
Pour résumer, nous avons 2 container différents, 2 anneaux différents et deux rond différents. Une version transparente et une version avec une couleur pleine.
Code CSS pour le carré :
```css
:root{
/*Valeur à changer en fonction*/
--couleur : black;
--couleurfond : white;
--x : 6vw;
--d : calc(var(--x)/2);
--l : calc(var(--x)/2);
--e : calc(var(--x)/4);
--d1 : calc(var(--x)/1.15);
--d2 : calc(var(--x)/1,25);
--d3 : calc(var(--x)/2,15);
--basecarre : calc(var(--x)/1.2);
--b2 : calc(var(--x)/2);
}
.carreinterieur2 {
background-color: var(--couleurfond);
height: var(--b2);
width: var(--b2);
display: table;
margin-left: auto;
margin-right: auto;
}
```
### Version 3
En HTML pour coder les formes ci-dessus :
```HTML
< div class = "containform2" >
< div class = "carreinterieur3" > < / div >
< / div >
< div class = "containform" >
< div class = "carrev2" >
< div class = "carreinterieur4" > < / div >
< / div >
< / div >
< div class = "containform" >
< div class = "carre3" > < / div >
< / div >
```
Code CSS pour le carré :
```css
:root{
/*Valeur à changer en fonction*/
--couleur : black;
--couleurfond : white;
--x : 6vw;
--d : calc(var(--x)/2);
--l : calc(var(--x)/2);
--e : calc(var(--x)/4);
--d1 : calc(var(--x)/1.15);
--d2 : calc(var(--x)/1,25);
--d3 : calc(var(--x)/2,15);
--basecarre : calc(var(--x)/1.2);
--b2 : calc(var(--x)/2);
--b3 : calc(var(--x)/1.3);
--b4 : calc(var(--x)/2.4);
}
.carreinterieur3 {
position: relative;
background-color: var(--couleurfond);
height: var(--basecarre);
width: var(--basecarre);
left : calc((var(--x) - var(--basecarre))/2);
display: table-cell;
vertical-align: middle;
}
.carrev2 {
position: relative;
background-color: var(--couleur);
height: var(--b3);
width: var(--b3);
margin-left: auto;
margin-right: auto;
}
.carreinterieur4 {
position : relative;
top : calc((var(--x) - var(--basecarre)) / 1.3);
left : calc((var(--x) - var(--basecarre)) / 1.3);
background-color: var(--couleurfond);
height: var(--d);
width: var(--d);
display: table-cell;
vertical-align: middle;
}
.carre3 {
background-color: var(--couleur);
height: var(--b4);
width: var(--b4);
display: table;
margin: 0 auto;
}
```
---
## Etude du triangle
### Version 1
frperalde
4 years ago