Corner Accent Borders
Boîte presque sans bord, marquée par quatre équerres de couleur qui s'allongent de 20 à 40 px avec un halo au survol, au focus clavier ou au toucher.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La boîte .cnb-box (200 × 120 px, arrondi 12 px) n'a qu'un filet blanc à 8 % d'opacité, à peine visible. Ses quatre coins sont tenus par des <span class="cnb-corner"> de 20 × 20 px placés 2 px en dehors du bord ; chacun ne dessine que deux côtés de 3 px (haut et gauche pour le coin haut gauche, etc.) avec un petit arrondi de 4 px, ce qui forme une équerre. Les couleurs vont de l'indigo au rose en tournant : #6366f1 en haut à gauche, #8b5cf6 en haut à droite, #d946ef en bas à droite, #ec4899 en bas à gauche.
Au survol, ou quand un élément de la boîte a le focus (:focus-within), chaque équerre passe à 40 × 40 px en 0,4 s avec une courbe qui accélère puis freine, et reçoit une ombre floue de sa couleur à 40 %, décalée de 3 px vers l'extérieur. Cette ombre est celle du carré entier de l'équerre : elle dessine aussi un léger carré plus sombre à l'intérieur de chaque angle, discret sur fond sombre, plus visible sur fond clair.
Le libellé est un vrai lien, .cnb-link, dont le ::after couvre toute la boîte : la boîte entière est cliquable, et le focus ou le toucher de ce lien allonge les équerres. Un bouton ou un champ placé dans la boîte produit le même effet, comme le bouton « Choisir un fichier » de l'exemple de zone de dépôt.
Accessibilité
- Clavier : Tab atteint le lien (ou le bouton) de la boîte ; les équerres s'allongent et un contour blanc (
--cnb-ring) apparaît autour de la boîte si le focus vient du clavier. Safari ne s'arrête sur les liens au Tab que si son réglage clavier le prévoit (Option+Tab sinon). - Toucher : toucher le lien allonge les équerres dans Chromium, Firefox et WebKit (mesuré avec écran tactile simulé) ; une boîte sans élément interactif ne réagirait pas au doigt dans WebKit.
- Mouvement réduit : avec
prefers-reduced-motion: reduce, les équerres passent de 20 à 40 px d'un coup, halo compris, sans glisser. - Contour de la boîte : le filet à 8 % ne suffit pas à délimiter la zone cliquable pour tout le monde ; les équerres le font aux angles. Sur un fond où elles ressortent mal, épaississez-les (
--cnb-thickness).
Compatibilité navigateur
CSS seul, aucun JavaScript. Mesuré dans Chromium 151, Firefox 153 et le WebKit 26.5 de Playwright : 0 erreur, deux copies indépendantes, survol, Tab, toucher, 390 px et mouvement réduit. Versions minimales d'après @mdn/browser-compat-data : le halo est calculé avec color-mix() (Chrome 111, Firefox 113, Safari 16.2) ; le reste demande inset pour le lien étiré (Chrome 87, Firefox 66, Safari 14.1).
Sans color-mix(), la déclaration d'ombre est ignorée : les équerres s'allongent sans halo. Pour un halo partout, remplacez color-mix(in srgb, var(--cnb-c1) 40%, transparent) par une couleur fixe, par exemple rgba(99, 102, 241, .4).
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0772-root">
<div class="cnb-box">
<span class="cnb-corner cnb-tl"></span>
<span class="cnb-corner cnb-tr"></span>
<span class="cnb-corner cnb-br"></span>
<span class="cnb-corner cnb-bl"></span>
<a class="cnb-link" href="#corner-accent">Corner Accent</a>
</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 |
|---|---|---|
--cnb-size et --cnb-size-hover |
20px et 40px |
Longueur des branches de chaque équerre au repos, puis au survol, au focus et au toucher. |
--cnb-thickness |
3px |
Épaisseur du trait des équerres. |
--cnb-c1 à --cnb-c4 |
#6366f1, #8b5cf6, #d946ef, #ec4899 |
Couleur de chaque coin, dans l'ordre haut gauche, haut droit, bas droit, bas gauche ; le halo reprend la même couleur. |
--cnb-speed |
.4s |
Durée de l'allongement et de l'apparition du halo. |
--cnb-w et --cnb-h |
200px et 120px |
Taille de la boîte ; la largeur ne dépasse jamais celle du conteneur. |
--cnb-fill |
#0a0a0f |
Fond de la boîte. |
--cnb-ring |
#fff |
Couleur du contour de focus clavier. |
FAQ
color: #fff sur .cnb-box. Sur une carte claire, donnez vos propres couleurs au contenu (titre, texte), réglez --cnb-fill sur le fond de la carte et choisissez des équerres foncées ou saturées, comme le laiton de l'exemple du promoteur.box-shadow posé sur l'élément de l'équerre, qui est un carré dont seuls deux côtés sont tracés. L'ombre suit donc tout le carré. Pour un halo limité au trait, remplacez dans les quatre règles box-shadow par filter: drop-shadow(0 0 6px var(--cnb-c1)) (--cnb-c2, --cnb-c3, --cnb-c4 selon le coin) : l'ombre suit alors la forme du trait..cnb-corner la taille var(--cnb-size-hover), et doublez ce marquage d'un texte ou d'un aria-pressed pour qu'il ne repose pas sur la seule forme.
