: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);
}