formes sur cartes

SwichGIT/src/css/Resp3.css

@@ -2,28 +2,29 @@
 @media screen and (min-width: 960px) {
 
     .anneau {
-        box-sizing: border-box;
+        position: relative;
-        background-color: #DE3030;
+        left: calc((var(--x) - var(--y)) / 2);
-        border-radius: 3vw;
+        background-color: var(--colorrond);
-        height: inherit;
+        border-radius: var(--y);
-        width: inherit;
+        height: var(--y);
+        width: var(--y);
         display: table-cell;
         vertical-align: middle;
     }
 
     .rondinterieur {
         background-color: var(--lightsedonca);
-        height: 3vw;
+        height: var(--z);
-        width: 3vw;
+        width: var(--z);
         display: table;
         margin: 0 auto;
-        border-radius: 3vw;
+        border-radius: var(--z);
     }
 
     .containform {
-        box-sizing: content-box;
+        position: relative;
-        height: 6vw;
+        height: var(--x);
-        width: 6vw;
+        width: var(--x);
         display: table-cell;
         vertical-align: middle;
     }
@@ -31,35 +32,39 @@
     .rond {
         display: table;
         margin: 0 auto;
-        background-color: #DE3030;
+        background-color: var(--colorrond);
-        height: 3vw;
+        height: var(--z);
-        width: 3vw;
+        width: var(--z);
-        border-radius: 3vw;
+        border-radius: var(--z);
     }
 
     /* PARTIE CARRE */
     .carre {
-        background-color: #30C0DE;
+        position: relative;
-        height: inherit;
+        background-color: var(--colorcarre);
-        width: inherit;
+        height: var(--y);
-        display: table-cell;
+        width: var(--y);
-        vertical-align: middle
+        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(--lightsedonca);
-        height: 3vw;
+        height: var(--z);
-        width: 3vw;
+        width: var(--z);
-        display: table;
-        margin: 0 auto;
     }
 
     .pcarre {
+        background-color: var(--colorcarre);
+        height: var(--z);
+        width: var(--z);
         display: table;
         margin: 0 auto;
-        background-color: #30C0DE;
-        height: 3vw;
-        width: 3vw;
     }
 
     /* PARTIE TRIANGLE */

SwichGIT/src/css/base.css

@@ -3,6 +3,16 @@
 	--lightprima: #DEDEDE;
 	--lightsedonca: #B7B7B7;
 	--lighttercia: #E6E6E6;
+	--colorrond : #DE3030;
+	--colorcarre : #30C0DE;
+	/*Les formes*/
+	--x : 3vw;
+	--y : 3vw; /*taille anneau*/
+	--z :1.5vw; /*taille rond*/
+	--d : calc(var(--x)/2);
+	--l : calc(var(--x)/2);
+
+
 }
 
 @font-face {
@@ -39,6 +49,7 @@ width: auto;
 bottom: 0;
 z-index: 20;
 }
+
 #clic{
 position: absolute;
 left: 55vw;
@@ -46,11 +57,13 @@ top : 7vw;
 height: auto;
 width: 15vw;
 }
+
 #card-conteneur{
 z-index: 20;
 position: absolute;
 left: 0vw;
 }
+
 .flex-container {
   padding: 0;
   margin: 0;

SwichGIT/src/index.html

@@ -101,44 +101,6 @@
 			<div class="containform">
 				<div class="pcarre"></div>
 			</div>
-
-			<!-- Forme : triangle-->
-			<div class="containform">
-				<div class="triangle">
-					<div class="trianglerinterieur"></div>
-				</div>
-			</div>
-			<div class="containform">
-				<div class="ptriangle"></div>
-			</div>
-
-			<!-- Forme : pentagone-->
-			<div class="containform">
-				<div class="triangletrapezeinte"></div>
-				<div class="trapezeinte"></div>
-				<div class="triangletrapeze"></div>
-				<div class="trapeze"></div>
-			</div>
-
-			<div class="containform">
-				<div class="triangletrapezep"></div>
-				<div class="trapezep"></div>
-			</div>
-
-			<!-- Forme : losange -->
-			<div class="containform">
-				<div class="losangephaut"></div>
-				<div class="losangepbas"></div>
-				<div class="losangephauti"></div>
-				<div class="losangepbasi"></div>
-
-			</div>
-			<div class="containform">
-				<div class="losangephautc"></div>
-				<div class="losangepbasc"></div>
-			</div>
-
-
 		</div>
 
 		<div class="mounts">