From 80588b1545f446aed2d2eefff1469ea65c851e6e Mon Sep 17 00:00:00 2001 From: frperalde Date: Mon, 14 Dec 2020 07:42:07 +0100 Subject: [PATCH] formes v2 --- .../Doc/Etudes formes/{ => V1}/index.html | 0 SwichGIT/Doc/Etudes formes/{ => V1}/script.js | 0 SwichGIT/Doc/Etudes formes/{ => V1}/style.css | 0 SwichGIT/Doc/Etudes formes/V2/index.html | 216 ++++++++++++++++++ SwichGIT/Doc/Etudes formes/V2/style.css | 99 ++++++++ 5 files changed, 315 insertions(+) rename SwichGIT/Doc/Etudes formes/{ => V1}/index.html (100%) rename SwichGIT/Doc/Etudes formes/{ => V1}/script.js (100%) rename SwichGIT/Doc/Etudes formes/{ => V1}/style.css (100%) create mode 100644 SwichGIT/Doc/Etudes formes/V2/index.html create mode 100644 SwichGIT/Doc/Etudes formes/V2/style.css diff --git a/SwichGIT/Doc/Etudes formes/index.html b/SwichGIT/Doc/Etudes formes/V1/index.html similarity index 100% rename from SwichGIT/Doc/Etudes formes/index.html rename to SwichGIT/Doc/Etudes formes/V1/index.html diff --git a/SwichGIT/Doc/Etudes formes/script.js b/SwichGIT/Doc/Etudes formes/V1/script.js similarity index 100% rename from SwichGIT/Doc/Etudes formes/script.js rename to SwichGIT/Doc/Etudes formes/V1/script.js diff --git a/SwichGIT/Doc/Etudes formes/style.css b/SwichGIT/Doc/Etudes formes/V1/style.css similarity index 100% rename from SwichGIT/Doc/Etudes formes/style.css rename to SwichGIT/Doc/Etudes formes/V1/style.css diff --git a/SwichGIT/Doc/Etudes formes/V2/index.html b/SwichGIT/Doc/Etudes formes/V2/index.html new file mode 100644 index 0000000..2c47017 --- /dev/null +++ b/SwichGIT/Doc/Etudes formes/V2/index.html @@ -0,0 +1,216 @@ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + + + + \ No newline at end of file diff --git a/SwichGIT/Doc/Etudes formes/V2/style.css b/SwichGIT/Doc/Etudes formes/V2/style.css new file mode 100644 index 0000000..f3d2cd6 --- /dev/null +++ b/SwichGIT/Doc/Etudes formes/V2/style.css @@ -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%); +} +