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