Notched Badge System
Quatre badges d'état (info, succès, alerte, erreur) de 46 px de haut, chacun entaillé d'une encoche carrée de 6 px à chaque coin par un clip-path: polygon() en pixels, avec un compteur rond de 22 px et un léger grossissement au survol : l'étiquette technique, en CSS seul.
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
Chaque .notch-badge est un inline-flex (marges internes 12 × 24 px, texte de 12,8 px en graisse 700, capitales espacées de 0,5 px) : 46 px de haut, et une largeur qui suit le libellé — 152,6, 125,9, 141,4 et 133,8 px pour Messages, Active, Warning et Errors (mesuré). Il est découpé par clip-path: var(--ntb-notch), un polygon() de douze points en calc() qui retire un carré de 6 × 6 px à chaque coin : 0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0…. Parce que l'encoche est en pixels, elle garde la même taille sur un badge de 120 comme de 200 px. Elle retire environ 2 % de la surface (mesuré : 1,9 à 2,3 %) et, dans Chromium 151, Firefox 153 et WebKit 26, le point à 2 px du coin ne reçoit pas le clic.
Quatre variantes de couleur : --info (#3b82f6 → #6366f1), --success (#10b981 → #059669), --danger (#ef4444 → #dc2626), toutes trois en texte blanc, et --warning (#f59e0b → #d97706) en texte #1a1a2e. Le compteur .nb-count est un rond de 22 px en blanc à 25 %, texte de 10,4 px. Au survol, en 0,3 s avec rebond (cubic-bezier(0.34, 1.56, 0.64, 1)) : scale(1.06) et brightness(1.2). Aucun JavaScript.
L'encoche vit dans une variable CSS sur le badge, --ntb-notch, sans <clipPath> SVG ni id : rien à ajouter à la page, et une seule ligne à changer pour retoucher les quatre coins de tous les badges. Ses points mêlent pixels et pourcentages (calc(100% - 6px)) : l'encoche garde 6 px, que le badge soit court ou long.
Accessibilité
- Contraste (12,8 px en graisse 700 : texte normal, seuil 4,5:1), mesuré sur la couleur de départ : alerte 7,9:1 (texte sombre) ; info 3,7:1, erreur 3,8:1 et succès 2,5:1 en texte blanc — sous le seuil. Assombrissez le départ :
#2563eb,#b91c1cet#047857passent au-dessus de 4,5:1. Le chiffre du compteur, sur un rond plus clair, perd encore un peu. - Couleur seule : le libellé dit l'état (« Retard », « Incident »), la couleur ne fait que le doubler — gardez toujours un mot. Le compteur seul (« 3 ») n'a pas de sens pour un lecteur d'écran : écrivez
aria-label="Erreurs : 3"sur le badge, ou un texte masqué visuellement dans.nb-count. - Clavier et mouvement : des
divaveccursor: pointer, sans rôle nitabindex(Tab ne s'y arrête pas, mesuré). Pour des filtres cliquables, utilisez des<button aria-pressed>;clip-pathrogne l'anneau de focus, prévoyez un:focus-visiblequi change le fond. Pas deprefers-reduced-motion: le grossissement de 6 % reste actif sous la préférence.
Compatibilité navigateur
CSS seul : clip-path: polygon() avec calc(), propriété personnalisée --ntb-notch, flexbox, dégradés, filter: brightness(). Zéro JavaScript, zéro SVG. Mesuré collé dans une page vierge : encoches identiques dans Chromium 151, Firefox 153 et WebKit 26.
Sans clip-path (Firefox avant 54, Safari avant 13.1 sans le préfixe -webkit-clip-path), les badges sont des rectangles lisibles, couleurs et compteurs intacts.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="notch-badges-wrap">
<div class="notch-badge notch-badge--info">… <span class="nb-count">…</span></div>
<div class="notch-badge notch-badge--success">… <span class="nb-count">…</span></div>
<div class="notch-badge notch-badge--warning">… <span class="nb-count">…</span></div>
<div class="notch-badge notch-badge--danger">… <span class="nb-count">…</span></div>
</div>
</div>Le code complet HTML + CSS + JS de Notched Badge System, 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 |
|---|---|---|
Taille de l'encoche (CSS — --ntb-notch sur .notch-badge) |
carré de 6 px à chaque coin | Remplacez les seize 6px du polygon() (douze points) : 4 px pour un petit badge, 10 px pour un badge de 60 px de haut. Au-delà du quart de la hauteur, l'encoche mord sur le texte. |
Couleurs (CSS — .notch-badge--info, --success, --warning, --danger) |
bleu, vert, ambre, rouge en dégradé à 135° | Ajoutez une variante en copiant une règle : .notch-badge--neutral { background: linear-gradient(135deg, #475569, #334155); color: #fff }. |
Marges internes (CSS — padding de .notch-badge) |
12 px × 24 px (46 px de haut) | 8px 14px pour un badge compact de 38 px ; l'encoche en pixels reste la même. |
Compteur (CSS — .nb-count) |
rond de 22 px, blanc à 25 %, 10,4 px | Au-delà de deux chiffres, passez en pastille : width: auto; min-width: 22px; padding: 0 6px; border-radius: 11px. |
Survol (CSS — .notch-badge:hover) |
scale(1.06), brightness(1.2), 0,3 s avec rebond |
Supprimez la règle pour des badges d'information non cliquables : le grossissement fait croire à un bouton. |
FAQ
calc(100% - 6px), chaque coin perd le même carré de 6 × 6 px, quelle que soit la longueur du libellé.polygon(0 6px, 6px 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 0 100%) encoche le haut gauche et le bas droit. Remplacez la valeur de --ntb-notch, rien d'autre ne change.div par un <button type="button" class="notch-badge notch-badge--info" aria-pressed="false"> : la forme et les couleurs suivent la classe. Ajoutez border: none et font: inherit à .notch-badge, qu'un bouton n'hérite pas. Au clic, basculez aria-pressed et filtrez votre liste ; marquez le filtre actif autrement que par la couleur, par exemple .notch-badge[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #fff }. Comme clip-path rogne l'anneau de focus par défaut, donnez au badge un :focus-visible qui change son fond (background: #1a1a2e; color: #fff) : Tab s'y arrête alors, et la sélection se voit.
