You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
227 lines
4.7 KiB
227 lines
4.7 KiB
:root{
|
|
--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);
|
|
}
|
|
|
|
/*Rond*/
|
|
|
|
.containform {
|
|
position: relative;
|
|
height: var(--x);
|
|
width: var(--x);
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
background-color: red;
|
|
}
|
|
.anneau {
|
|
position: relative;
|
|
left: calc((var(--x) - var(--y)) / 2);
|
|
background-color: var(--couleur);
|
|
border-radius: var(--y);
|
|
height: var(--y);
|
|
width: var(--y);
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
.anneau2 {
|
|
position: relative;
|
|
background-color: var(--couleurfond);
|
|
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(--y);
|
|
height: var(--y);
|
|
width: var(--y);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.rondinterieur {
|
|
background-color: var(--couleurfond);
|
|
height: var(--z);
|
|
width: var(--z);
|
|
display: table;
|
|
margin: 0 auto;
|
|
border-radius: var(--z);
|
|
}
|
|
.rond {
|
|
display: table;
|
|
margin: 0 auto;
|
|
background-color: var(--couleur);
|
|
height: var(--z);
|
|
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;
|
|
background-color: var(--couleurfond);
|
|
height: var(--z);
|
|
width: var(--z);
|
|
border-radius: var(--z);
|
|
}
|
|
.rond3 {
|
|
position: relative;
|
|
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(--z);
|
|
width: var(--z);
|
|
border-radius: var(--z);
|
|
}
|
|
.rond4 {
|
|
display: table;
|
|
margin: 0 auto;
|
|
background-color: var(--couleur);
|
|
height: var(--z);
|
|
width: var(--z);
|
|
border-radius: var(--z);
|
|
}
|
|
|
|
/*Carré*/
|
|
.carre {
|
|
position: relative;
|
|
background-color: var(--couleur);
|
|
height: var(--y);
|
|
width: var(--y);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.carreinterieur {
|
|
position: relative;
|
|
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(--z);
|
|
width: var(--z);
|
|
}
|
|
.carre2 {
|
|
background-color: var(--couleur);
|
|
height: var(--z);
|
|
width: var(--z);
|
|
display: table;
|
|
margin: 0 auto;
|
|
}
|
|
.carreinterieur2 {
|
|
background-color: var(--couleurfond);
|
|
height: var(--z);
|
|
width: var(--z);
|
|
display: table;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.carreinterieur3 {
|
|
position: relative;
|
|
background-color: var(--couleurfond);
|
|
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(--y);
|
|
width: var(--y);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.carreinterieur4 {
|
|
position : relative;
|
|
top : calc((var(--y) - var(--z)) / 2);
|
|
left : calc((var(--y) - var(--z)) / 2);
|
|
background-color: var(--couleurfond);
|
|
height: var(--z);
|
|
width: var(--z);
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
.carre3 {
|
|
background-color: var(--couleur);
|
|
height: var(--z);
|
|
width: var(--z);
|
|
display: table;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/*triangle*/
|
|
.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;
|
|
top : calc((var(--x) - var(--z))/1.6);
|
|
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);
|
|
}
|
|
.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);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|