bvandevliet/Vandevliet.AerialShots.Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Arrow effect.

Browse source
This commit is contained in:
Bob Vandevliet 2024-06-19 14:58:32 +02:00
parent 302bb67afc
commit 26d72f1e8c
2 changed files with 12 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

11
public/assets/css/styles.css
View file

@ -88,3 +88,14 @@ h6:hover .anchor-link {
.card:hover .card-img-overlay { .card:hover .card-img-overlay {
background-color: rgba(0, 0, 0, 0.4); 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);
}

2
public/index.html
View file

@ -98,7 +98,7 @@
</p> </p>
</section> </section>
<div class="position-relative overflow-hidden"> <div class="position-relative overflow-hidden arrow-effect">
<section class="container-xxl text-shadow"> <section class="container-xxl text-shadow">
<h2 class="section" id="section-wow">Werkwijze</h2> <h2 class="section" id="section-wow">Werkwijze</h2>
<p> <p>