Diagonal Clip
Deux calques qui balaient la carte en diagonale depuis le coin bas-gauche et la laissent coupée en deux tons, chacun avec son propre contenu.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. SVG comprend 30 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Sous la face .dgc-front, la carte .dgc-card empile deux calques .dgc-layer. Au repos, les quatre points du clip-path: polygon() de chacun sont réunis dans le coin inférieur gauche : rien ne se voit. À l'ouverture, le premier calque s'étire jusqu'à couvrir toute la carte, en 0,6 s avec la courbe cubic-bezier(.4,0,.2,1) : un balayage oblique qui part du coin bas-gauche. Le second, .dgc-layer-2, part 0,1 s plus tard du même coin et s'arrête sur le triangle inférieur droit. La carte finit partagée par sa diagonale : premier calque en haut à gauche, second en bas à droite.
Le contenu de chaque calque suit ce partage : celui du premier est calé en haut à gauche, celui du second en bas à droite, avec une marge --dgc-pad (1 rem). Deux informations tiennent ainsi sans se chevaucher : un titre et une action, un temps et un lien. Une image ou un SVG avec la classe .dgc-media remplit la face ou un calque.
Déclencheurs : le survol sur les appareils qui survolent (@media (hover: hover)), le focus clavier de la carte ou d'un élément qu'elle contient, et la classe .dgc-open, que le script bascule à chaque tap sur écran tactile (un lien ou un bouton touché garde son action). Avec .dgc-manual sur la carte, survol, focus et tap sont ignorés : le balayage n'a lieu que lorsque votre script pose .dgc-open, ce qui en fait un rideau de transition entre deux états.
Accessibilité
- Clavier : au Tab, la carte de démonstration (
tabindex="0") se couvre comme au survol, avec un contour#f0abfc. Une carte qui est un lien ou un bouton n'a pas besoin detabindex. - Lecteurs d'écran : les calques restent dans la page et leur texte est lu après celui de la face. Quand ils répètent la face (ligne de sommaire doublée) ou ne sont qu'un décor de transition, mettez
aria-hidden="true"sur chaque.dgc-layer. - Mouvement réduit : sous
prefers-reduced-motion: reduce, le balayage et son décalage sont supprimés : les deux calques apparaissent ensemble, déjà en place. - Toucher : un tap lance le balayage, le suivant le retire ; plus d'état « survolé » qui reste collé après le doigt.
Compatibilité navigateur
Mesuré dans Chromium 151, Firefox 153 et le WebKit 26.5 de Playwright : 0 erreur, deux copies indépendantes, balayage au survol, au Tab et au tap (le 2e tap le retire), état final immédiat en mouvement réduit, rien qui déborde à 390 px. :focus-visible et :has() donnent les versions minimales.
Avant ces versions, survol, tap et classe .dgc-open fonctionnent dans les versions plus anciennes qui ont la propriété inset (Chrome 87, Firefox 66, Safari 14.1 : versions où arrive la propriété inset qui superpose les faces) ; le focus clavier ne déclenche plus le balayage.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0628-root">
<div class="dgc-card" tabindex="0">
<span class="dgc-front">Survol</span>
<div class="dgc-layer">
<span>Calque 1</span>
</div>
<div class="dgc-layer dgc-layer-2">
<span>Calque 2</span>
</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
--dgc-w et --dgc-h |
280px et 180px |
Taille de la carte (largeur bornée par le conteneur). |
--dgc-radius |
1rem |
Arrondi des coins. |
--dgc-front et --dgc-front-color |
#1a1a24 et #fff |
Fond et texte de la face visible au repos. |
--dgc-layer-1 |
linear-gradient(135deg,#6366f1,#d946ef) |
Fond du premier calque, celui qui couvre toute la carte. |
--dgc-layer-2 et --dgc-layer-color |
linear-gradient(135deg,#d946ef,#f43f5e) et #fff |
Fond du triangle inférieur droit, et couleur du texte des deux calques. |
--dgc-pad |
1rem |
Marge du contenu des calques dans leur coin (0 si ce contenu gère sa propre mise en page). |
--dgc-speed et --dgc-delay |
.6s et .1s |
Durée du balayage et retard du second calque. |
--dgc-bg et --dgc-min-h |
#0a0a0f et 300px |
Fond et hauteur minimale de la racine. |
Classes .dgc-open et .dgc-manual |
absentes | .dgc-open lance le balayage (tap ou script). .dgc-manual désactive survol, focus et tap pour un pilotage par script seulement. |
FAQ
dgc-manual à la carte, puis : posez dgc-open, attendez la fin du balayage (durée + retard, soit 700 ms par défaut), remplacez le contenu de .dgc-front, retirez dgc-open. Les calques se retirent et découvrent le nouveau contenu.--dgc-pad:0, comme dans l'exemple du sommaire.0 100% (coin bas-gauche) devient par exemple 100% 0 pour partir du coin haut-droit, et le triangle final du second calque s'écrit alors polygon(0 0, 100% 0, 0 100%, 0 100%).
