frperalde
4 years ago
parent
4549ff11cd
commit
80588b1545
@ -0,0 +1,216 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<title></title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--ROND-->
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb rond"></div>
|
||||||
|
</div>
|
||||||
|
<div class="containexte">
|
||||||
|
<div class="formeexté cn rond"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn rond"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform2">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb rond"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn rond"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--CARRE-->
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb carre"></div>
|
||||||
|
</div>
|
||||||
|
<div class="containexte">
|
||||||
|
<div class="formeexté cn carre"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn carre"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform2">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb carre"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn carre"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<!--TRIANGLE-->
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class="castriangle cb formeinté triangle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="containexte">
|
||||||
|
<div class="formeexté cn triangle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class="castriangle cn formeinté triangle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform2">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class="castriangle cb formeinté triangle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class="castriangle cn formeinté triangle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--LOSANGE-->
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb losange"></div>
|
||||||
|
</div>
|
||||||
|
<div class="containexte">
|
||||||
|
<div class="formeexté cn losange"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn losange"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform2">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb losange"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn losange"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<!--CROIX-->
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb croix"></div>
|
||||||
|
</div>
|
||||||
|
<div class="containexte">
|
||||||
|
<div class="formeexté cn croix"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn croix"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform2">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb croix"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn croix"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--PENTA-->
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb penta"></div>
|
||||||
|
</div>
|
||||||
|
<div class="containexte">
|
||||||
|
<div class="formeexté cn penta"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn penta"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform2">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb penta"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn penta"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<!--HEXA-->
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb hexa"></div>
|
||||||
|
</div>
|
||||||
|
<div class="containexte">
|
||||||
|
<div class="formeexté cn hexa"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn hexa"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform2">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb hexa"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn hexa"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--HOCTO-->
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb hocto"></div>
|
||||||
|
</div>
|
||||||
|
<div class="containexte">
|
||||||
|
<div class="formeexté cn hocto"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn hocto"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform2">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb hocto"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn hocto"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,99 @@
|
|||||||
|
:root{
|
||||||
|
--x : 10vw;
|
||||||
|
--y : 8vw;
|
||||||
|
--z : 4vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.containform {
|
||||||
|
position: relative;
|
||||||
|
height: var(--x);
|
||||||
|
width: var(--x);
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.containform2{
|
||||||
|
position: relative;
|
||||||
|
height: var(--x);
|
||||||
|
width: var(--x);
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
/*ROND*/
|
||||||
|
.containexte{
|
||||||
|
margin: 0 auto;
|
||||||
|
height: var(--y);
|
||||||
|
width: var(--y);
|
||||||
|
}
|
||||||
|
|
||||||
|
.containinte{
|
||||||
|
/*PROBLEME SIZE*/
|
||||||
|
top: calc((var(--x) - var(--z)) / 2);
|
||||||
|
left: calc((var(--x) - var(--z)) / 2);
|
||||||
|
height: var(--z);
|
||||||
|
width: var(--z);
|
||||||
|
z-index: 2;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rond{
|
||||||
|
-webkit-clip-path: circle(50% at 50% 50%);
|
||||||
|
clip-path: circle(50% at 50% 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cb{
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cn{
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formeinté{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.formeexté{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carre{
|
||||||
|
-webkit-clip-path: inset(0 0 0 0);
|
||||||
|
clip-path: inset(0 0 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.triangle{
|
||||||
|
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||||
|
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.castriangle{
|
||||||
|
margin-top: calc( (var(--y) - var(--z)) / 5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.losange{
|
||||||
|
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
||||||
|
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.croix{
|
||||||
|
-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
|
||||||
|
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.penta{
|
||||||
|
-webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
|
||||||
|
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hexa{
|
||||||
|
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||||
|
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hocto{
|
||||||
|
-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
|
||||||
|
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in new issue