From 26d72f1e8cafa64ffc53997fc496371f755b16c1 Mon Sep 17 00:00:00 2001
From: Bob Vandevliet <info@bvandevliet.nl>
Date: Wed, 19 Jun 2024 14:58:32 +0200
Subject: [PATCH] Arrow effect.

---
 public/assets/css/styles.css | 11 +++++++++++
 public/index.html            |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/public/assets/css/styles.css b/public/assets/css/styles.css
index 35e0bb3..f321d73 100644
--- a/public/assets/css/styles.css
+++ b/public/assets/css/styles.css
@@ -87,4 +87,15 @@ h6:hover .anchor-link {
 
 .card:hover .card-img-overlay {
   background-color: rgba(0, 0, 0, 0.4);
+}
+
+.arrow-effect {
+  --s: 100px;
+  --c1: var(--bs-body-bg);
+  --c2: var(--bs-secondary-bg-subtle);
+
+  background:
+    conic-gradient(#0000 75%, var(--c1) 0) 0 calc(var(--s)/4),
+    conic-gradient(from 45deg, var(--c1) 25%, var(--c2) 0);
+  background-size: var(--s) var(--s);
 }
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 4c325a9..33ed30e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -98,7 +98,7 @@
       </p>
     </section>
 
-    <div class="position-relative overflow-hidden">
+    <div class="position-relative overflow-hidden arrow-effect">
       <section class="container-xxl text-shadow">
         <h2 class="section" id="section-wow">Werkwijze</h2>
         <p>