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.
237 lines
4.6 KiB
237 lines
4.6 KiB
:root{
|
|
--couleur : black;
|
|
--couleurfond : white;
|
|
--x : 10vw;
|
|
--d : calc(var(--x)/2);
|
|
--l : calc(var(--x)/2);
|
|
--e : calc(var(--x)/4);
|
|
--d1 : calc(var(--x)/1.1);
|
|
--d2 : calc(var(--x)/1.2);
|
|
--d3 : calc(var(--x)/2.4);
|
|
/*carre*/
|
|
--basecarre : calc(var(--x)/1.2);
|
|
--b2 : calc(var(--x)/2);
|
|
--b3 : calc(var(--x)/1.3);
|
|
--b4 : calc(var(--x)/2.4);
|
|
/*triangle*/
|
|
--btriangle : var(--x);
|
|
--contour1 : calc(var(--btriangle) / 2);
|
|
--bptriange : calc(var(--btriangle) / 2);
|
|
--contour2 : calc(var(--bptriange) / 2);
|
|
}
|
|
|
|
/*Rond*/
|
|
|
|
.containform {
|
|
height: var(--x);
|
|
width: var(--x);
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.anneau {
|
|
background-color: var(--couleur);
|
|
border-radius: var(--x);
|
|
height: var(--x);
|
|
width: var(--x);
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.anneau2 {
|
|
position: relative;
|
|
background-color: var(--couleurfond);
|
|
border-radius: var(--d1);
|
|
height: var(--d1);
|
|
width: var(--d1);
|
|
left : calc((var(--x) - var(--d1))/2);
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.anneau3 {
|
|
position: relative;
|
|
background-color: var(--couleur);
|
|
border-radius: var(--d2);
|
|
height: var(--d2);
|
|
width: var(--d2);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.rondinterieur {
|
|
background-color: var(--couleurfond);
|
|
height: var(--d);
|
|
width: var(--d);
|
|
display: table;
|
|
margin: 0 auto;
|
|
border-radius: var(--d);
|
|
}
|
|
.rond {
|
|
display: table;
|
|
margin: 0 auto;
|
|
background-color: var(--couleur);
|
|
height: var(--d);
|
|
width: var(--d);
|
|
border-radius: var(--d);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
|
|
/*Carré*/
|
|
.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;
|
|
}
|
|
|
|
.carreinterieur2 {
|
|
background-color: var(--couleurfond);
|
|
height: var(--b2);
|
|
width: var(--b2);
|
|
display: table;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/*triangle*/
|
|
.triangle {
|
|
display: table;
|
|
margin: 0 auto;
|
|
border-left: var(--contour1) solid transparent;
|
|
border-right: var(--contour1) solid transparent;
|
|
border-bottom: var(--btriangle) solid var(--couleur);
|
|
}
|
|
.trianglerinterieur {
|
|
position: absolute;
|
|
left: calc(var(--contour1) - (var(--contour2) - 0.4vw));
|
|
border-left: var(--contour2) solid transparent;
|
|
border-right: var(--contour2) solid transparent;
|
|
border-bottom: var(--bptriange) solid var(--couleurfond);
|
|
}
|
|
.ptriangle {
|
|
display: table;
|
|
margin: 0 auto;
|
|
margin-top: 0.75vw;
|
|
border-left: 1.5vw solid transparent;
|
|
border-right: 1.5vw solid transparent;
|
|
border-bottom: 3vw solid var(--couleur);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|