Corner Shape Grid
Une grille de 4 × 3 cases de 73 px dont la découpe dépend de la place (superellipses aux angles, biseaux en haut et en bas, creux sur les côtés, encoches au centre), et où un clic tire pour la case une forme au hasard parmi sept clip-path: polygon() : un plan qui se lit par la forme.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Glassmorphism comprend 47 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La grille .cs-grid-wrap (4 colonnes, gap: 8px, marges de 12 px, 340 px au plus) aligne douze .cs-grid-item carrés (aspect-ratio: 1, 73 × 73 px mesurés), chacun avec son dégradé et son numéro en blanc de 13,6 px. Chaque case porte sept variables de forme en pourcentages : --csg-squircle (superellipse n = 4), --csg-squircle-tight (n = 5) et --csg-squircle-soft (n = 3), 64 points chacune ; --csg-bevel (biseau de 22 %) et --csg-bevel-sm (12 %) ; --csg-notch (encoche carrée de 16 %) ; --csg-scoop-concave (creux en quart de cercle de 22 %). Des règles :nth-child posent la forme selon la place : angles 1 et 12 en n = 4, angles 4 et 9 en n = 5, bords haut et bas (2, 3, 10, 11) en petit biseau, côtés (5, 8) en creux, centre (6, 7) en encoche.
Le JavaScript (une IIFE de 0,5 Ko) écoute les clics sur #cs-grid et, sur la case touchée, écrit style.clipPath = 'var(--csg-…)' avec une des sept formes tirée au hasard — mesuré dans Chromium 151, Firefox 153 et WebKit 26 : la variable écrite en ligne est résolue en polygon() et la case change de découpe. Une chance sur sept de retomber sur la même forme : le clic semble alors sans effet. Au survol, la case grossit de 10 % et s'éclaircit de 20 % en 0,4 s, passée au-dessus de ses voisines (z-index: 2). Sous 480 px de large, la grille passe à trois colonnes et 260 px.
Les sept formes sont des variables CSS posées sur chaque case (--csg-notch, --csg-bevel…), et le tableau du JavaScript contient leurs noms ('var(--csg-notch)'…) plutôt que des url(#…) vers des <clipPath> SVG. Ainsi le clic écrit une forme qui existe toujours : un url() vers un SVG absent de la page laisserait les douze cases carrées et le clic sans effet. Le code reste en un seul bloc, sans SVG ni id à fournir.
Accessibilité
- Clic seulement : les cases sont des
divsans rôle nitabindex, l'écouteur ne réagit qu'au clic — ni Tab ni Entrée n'atteignent la grille (mesuré). Pour une grille de réservation, faites de chaque case un<button>: le clic au clavier déclenche le même événement, et leclosest('.cs-grid-item')du script fonctionne toujours.clip-pathrogne l'anneau de focus : marquez-le parfilter: brightness(1.3)sur:focus-visible. - La forme ne dit rien seule : un lecteur d'écran ne voit pas qu'une case est un angle ou un centre, ni qu'elle vient de changer. Écrivez la place et l'état dans le texte ou un
aria-label(« Stand 4, angle, libre »), et annoncez le changement (aria-pressed, ou une zonearia-live). - Contraste et mouvement : chiffres blancs de 13,6 px à 4,47:1 sur
#6366f1(juste sous le seuil de 4,5:1) et 5,7:1 sur#7c3aed, mais 2,4:1 sur#06b6d4, 2,5:1 sur#14b8a6et#10b981; les deux cases ambre, en texte sombre, passent (7,9:1 et 5,3:1). Pas deprefers-reduced-motion: le grossissement de 10 % au survol reste actif (mesuré).
Compatibilité navigateur
CSS : grille, aspect-ratio, clip-path: polygon() en pourcentages, propriétés personnalisées, :nth-child, une media query à 480 px. JavaScript : une IIFE sans dépendance, un écouteur de clic. Zéro SVG. Formes et changement au clic mesurés dans Chromium 151, Firefox 153 et WebKit 26.
Les versions minimales viennent d'aspect-ratio (Chrome 88, Firefox 89, Safari 15) : avant, les cases n'ont plus de hauteur propre et s'écrasent sur leur texte ; ajoutez height: 73px en secours. Sans clip-path, les cases restent carrées et le clic ne change rien de visible.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="cs-grid-wrap" id="cs-grid">
<div class="cs-grid-item">1</div>
<div class="cs-grid-item">2</div>
…
<div class="cs-grid-item">12</div>
</div>
</div>Le code complet HTML + CSS + JS de Corner Shape Grid, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Forme par place (CSS — règles .cs-grid-item:nth-child(n)) |
angles en superellipse, bords haut et bas en biseau de 12 %, côtés en creux, centre en encoche | Chaque règle appelle une variable : clip-path: var(--csg-bevel) pour un grand biseau. Les sept formes sont disponibles sur toutes les cases. |
Formes tirées au clic (JS — tableau r) |
les sept variables | Retirez des noms pour limiter le tirage, ou remplacez le hasard par un cycle : t.dataset.i = (+(t.dataset.i || 0) + 1) % r.length; t.style.clipPath = r[t.dataset.i]. |
Colonnes (CSS — grid-template-columns et la media query à 480 px) |
4 colonnes, 3 sous 480 px | Les formes sont posées par numéro, pas par position réelle : si vous changez le nombre de colonnes, réécrivez les :nth-child pour retrouver angles, bords et centre. |
Profondeur des formes (CSS — variables --csg-* sur .cs-grid-item) |
biseaux 22 et 12 %, encoche 16 %, creux 22 % | Pour un biseau de b %, les huit points sont 0 b%, b% 0, (100−b)% 0, 100% b%…. Au-delà de 25 %, les côtés droits deviennent plus courts que les pans ; à 50 %, les découpes se rejoignent au milieu des côtés. |
Survol (CSS — .cs-grid-item:hover) |
scale(1.1), brightness(1.2), z-index: 2 |
scale(1.05) pour une grille serrée où le grossissement couvre les voisines. |
FAQ
clip-path n'est prévue, et que les sept formes n'ont pas le même nombre de points : 64 pour les superellipses, 8 pour les biseaux, 12 pour l'encoche, 28 pour le creux. Le navigateur n'interpole que des polygones de même nombre de points ; ajouter transition: clip-path .4s n'animerait que les passages d'une superellipse à une autre, ou d'un biseau à l'autre (8 points chacun). Pour un morphing entre toutes les formes, il faut les redessiner avec la même structure — c'est ce que fait Morphing Corner Shapes (fx-0337) : quatre formes de 68 points, qui passent de l'une à l'autre en transition animée au survol.document.getElementById('cs-grid'), donc la première grille seulement, et deux éléments ne peuvent pas porter le même id. Remplacez la première ligne par une boucle : document.querySelectorAll('.cs-grid-wrap').forEach(function (e) { e.addEventListener('click', …) }) — c'est ce que fait le fichier de scènes de cette page pour ses trois grilles. Les formes, en CSS, n'ont pas ce problème.:nth-child pour trois colonnes (angles 1, 3, 10, 12).
