From 5a527e6a3d81fb1065be9a3af0475306776e92f7 Mon Sep 17 00:00:00 2001
From: Juan Massuelles <jbmassuelles@solocal.com>
Date: Fri, 7 Jul 2023 15:19:20 +0200
Subject: [PATCH] [HTML5] class for having a faded corner background

---
 gradient-border/_gradient-border-html.scss       | 28 +++++++++++++++++++++
 gradient-border/gradient-border-html-initial.css | 31 ++++++++++++++++++++++++
 gradient-border/gradient-border-html.css         | 26 ++++++++++++++++++++
 gradient-border/gradient-border-html.css.map     |  7 ++++++
 gradient-border/index.html                       | 15 ++++++++++++
 5 files changed, 107 insertions(+)
 create mode 100644 gradient-border/_gradient-border-html.scss
 create mode 100644 gradient-border/gradient-border-html-initial.css
 create mode 100644 gradient-border/gradient-border-html.css
 create mode 100644 gradient-border/gradient-border-html.css.map
 create mode 100644 gradient-border/index.html

diff --git a/gradient-border/_gradient-border-html.scss b/gradient-border/_gradient-border-html.scss
new file mode 100644
index 0000000..16e4eb9
--- /dev/null
+++ b/gradient-border/_gradient-border-html.scss
@@ -0,0 +1,28 @@
+.cornered {
+  padding:3px 8px;
+  position: relative;
+  @at-root ul#{&} {
+    padding-left:2em;
+  }
+  &:after {
+    content:"";
+    position:absolute;
+    bottom:0;
+    left:0;
+    height:60px;
+    width:60px;
+    border: 1px solid transparent;
+    border-image: linear-gradient(45deg,rgba(165,165,165,0) 5px, rgba(165,165,165,1) 10px, rgba(165,165,165,0) 45px, rgba(165,165,165,0) 100%);
+    border-image-slice: 1;
+  }
+  &:before {
+    content:"";
+    position:absolute;
+    bottom:0;
+    left:0;
+    height:15px;
+    width:15px;
+    background: linear-gradient(45deg,  rgba(165,165,165,1) 0%,rgba(165,165,165,1) 50%,rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%);
+    border-radius: 0 0 0 5px;
+  }
+}
diff --git a/gradient-border/gradient-border-html-initial.css b/gradient-border/gradient-border-html-initial.css
new file mode 100644
index 0000000..33436c7
--- /dev/null
+++ b/gradient-border/gradient-border-html-initial.css
@@ -0,0 +1,31 @@
+.cornered {
+  padding:3px 8px;
+  position: relative;
+}
+
+ul.cornered {
+  padding-left:initial;
+}
+
+.cornered:after {
+  content:"";
+  position:absolute;
+  bottom:0;
+  left:0;
+  height:60px;
+  width:60px;
+  border: 1px solid transparent;
+  border-image: linear-gradient(45deg,rgba(165,165,165,0) 5px, rgba(165,165,165,1) 10px, rgba(165,165,165,0) 45px, rgba(165,165,165,0) 100%);
+  border-image-slice: 1;
+}
+
+.cornered:before {
+  content:"";
+  position:absolute;
+  bottom:0;
+  left:0;
+  height:15px;
+  width:15px;
+  background: linear-gradient(45deg,  rgba(165,165,165,1) 0%,rgba(165,165,165,1) 50%,rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%);
+  border-radius: 0 0 0 5px;
+}
\ No newline at end of file
diff --git a/gradient-border/gradient-border-html.css b/gradient-border/gradient-border-html.css
new file mode 100644
index 0000000..c674627
--- /dev/null
+++ b/gradient-border/gradient-border-html.css
@@ -0,0 +1,26 @@
+.cornered {
+  padding: 3px 8px;
+  position: relative; }
+  ul.cornered {
+    padding-left: 2em; }
+  .cornered:after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 60px;
+    width: 60px;
+    border: 1px solid transparent;
+    border-image: linear-gradient(45deg, rgba(165, 165, 165, 0) 5px, #a5a5a5 10px, rgba(165, 165, 165, 0) 45px, rgba(165, 165, 165, 0) 100%);
+    border-image-slice: 1; }
+  .cornered:before {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 15px;
+    width: 15px;
+    background: linear-gradient(45deg, #a5a5a5 0%, #a5a5a5 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 100%);
+    border-radius: 0 0 0 5px; }
+
+/*# sourceMappingURL=gradient-border-html.css.map */
diff --git a/gradient-border/gradient-border-html.css.map b/gradient-border/gradient-border-html.css.map
new file mode 100644
index 0000000..d0d99a1
--- /dev/null
+++ b/gradient-border/gradient-border-html.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAAA,SAAU;EACR,OAAO,EAAC,OAAO;EACf,QAAQ,EAAE,QAAQ;EACT,WAAO;IACd,YAAY,EAAC,GAAG;EAElB,eAAQ;IACN,OAAO,EAAC,EAAE;IACV,QAAQ,EAAC,QAAQ;IACjB,MAAM,EAAC,CAAC;IACR,IAAI,EAAC,CAAC;IACN,MAAM,EAAC,IAAI;IACX,KAAK,EAAC,IAAI;IACV,MAAM,EAAE,qBAAqB;IAC7B,YAAY,EAAE,0HAA4H;IAC1I,kBAAkB,EAAE,CAAC;EAEvB,gBAAS;IACP,OAAO,EAAC,EAAE;IACV,QAAQ,EAAC,QAAQ;IACjB,MAAM,EAAC,CAAC;IACR,IAAI,EAAC,CAAC;IACN,MAAM,EAAC,IAAI;IACX,KAAK,EAAC,IAAI;IACV,UAAU,EAAE,wGAAyH;IACrI,aAAa,EAAE,SAAS",
+"sources": ["_gradient-border-html.scss"],
+"names": [],
+"file": "gradient-border-html.css"
+}
diff --git a/gradient-border/index.html b/gradient-border/index.html
new file mode 100644
index 0000000..993c6e3
--- /dev/null
+++ b/gradient-border/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <link rel="stylesheet" href="gradient-border-html.css">
+  </head>
+  <body>
+    <h2 class="cornered">sources : </h2>
+    <ul  class="cornered">
+      <li><a href="https://stackoverflow.com/a/40747995">pour le border en gradient cf https://stackoverflow.com/a/40747995</a></li>
+      <li><a href="https://stackoverflow.com/a/30668976">pour le @at-root ul#{&} cf https://stackoverflow.com/a/30668976</a></li>
+      <li><a href="https://www.colorzilla.com/gradient-editor/">pour construire les gradients cf https://www.colorzilla.com/gradient-editor/</a></li>
+    </ul>
+  </body>
+</html>
\ No newline at end of file