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