@ -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,30 +60,17 @@ 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: var(--couleur) ;
background-color: #FFD100 ;
border-radius: var(--x);
border-radius: var(--x);
height: var(--x);
height: var(--x);
width: var(--x);
width: var(--x);
@ -92,7 +79,7 @@ Code forme anneau :
vertical-align: middle;
vertical-align: middle;
}
}
.rondinterieur {
.rondinterieur {
background-color: var(--couleurfond) ;
background-color: white ;
height: var(--d);
height: var(--d);
width: var(--d);
width: var(--d);
/*Centrer horizontalement*/
/*Centrer horizontalement*/
@ -106,7 +93,7 @@ Code forme anneau :
display: table;
display: table;
margin: 0 auto;
margin: 0 auto;
/*Définir la couleur*/
/*Définir la couleur*/
background-color: var(--couleur) ;
background-color: #FFD100
height: var(--d);
height: var(--d);
width: var(--d);
width: var(--d);
border-radius: var(--d);
border-radius: var(--d);
@ -118,307 +105,55 @@ 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 :
```HTML
```HTML
< div class = "containform2" > < div class = "containform2" >
< div class = "rond2" > < / div >
< div class = "rond2" > < / div >
< / div >
< div class = "containform" >
< div class = "rond" > < / div >
< / div > < / div >
```
```
Code CSS :
Code CSS :
```css
```css
.containform2{
.containform2{
height: var(--x); height: var(--x);
width: var(--x);
width: var(--x);
display: table-cell;
display: table-cell;
vertical-align: middle;
vertical-align: middle;
background-color: var(--couleur) ;
background-color: #FFD100 ;
}
}
.rond2 {
.rond2 {
display: table; display: table;
margin: 0 auto;
margin: 0 auto;
background-color: var(--couleurfond) ;
background-color: white ;
height: var(--d);
height: var(--d);
width: var(--d);
width: var(--d);
border-radius: var(--d);
border-radius: var(--d);
}
}
```
```
### 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 :
Pour différencier chacunes des formes, nous réduisons le diamètre à chaque fois.
Il faut alors coder la forme de gauche
```HTML
```HTML
< div class = "containform2" > < 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 > < / 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;
background-color: white;
background-color: var(--couleurfond);
border-radius: var(--x);
border-radius: var(--d1);
height: var(--x);
height: var(--d1);
width: var(--x);
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;
display: table-cell;
vertical-align: middle;
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 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.
frperalde
4 years ago