Ruban d’angle et badge en CSS (ribbon et badge)
Choisissez le style, le texte et l’angle. Le ruban est fait avec un seul élément et s’adapte à la taille du texte.
Mode d’emploi« Le plus vendu » dans l’angle de la carte
Disponible en: 
Ruban d’angle et badge en CSS (ribbon et badge): à quoi ça sert
Un ruban dans l’angle met en avant l’offre la plus choisie, le nouveau produit ou la promotion sans modifier le reste de la carte. Choisissez entre ruban diagonal, badge rond, étiquette ou bandeau plié, le texte, l’angle, les couleurs et la taille.
Le code vient avec la carte d’exemple et le CSS du ruban, fait avec un seul élément : en diagonale, la carte coupe ce qui dépasse avec overflow hidden. L’aperçu affiche le résultat instantanément, et la page explique quand utiliser chaque style.
Mode d’emploi
- Choisissez le style et le texte.
- Réglez l’angle, les couleurs et la taille.
- Copiez le code.
Quand l’utiliser
- Offre mise en avant dans un tableau de prix.
- Produit nouveau ou en promotion.
- Badge de remise sur des photos.
Questions fréquentes
Comment le ruban est-il coupé dans l’angle ?
La carte reçoit overflow: hidden et position: relative.
Les lecteurs d’écran lisent-ils le ruban ?
Oui, parce que le texte est dans le HTML. Si le badge ne fait que répéter quelque chose déjà présent dans la carte, vous pouvez marquer le ruban avec aria-hidden="true" pour qu’il ne soit pas annoncé deux fois.
Quel style utiliser ?
Le ruban diagonal attire le plus l’attention et convient aux offres mises en avant. Le badge rond est bien pour des remises (« -20 % ») sur des photos de produits, et l’étiquette est la plus discrète, idéale pour des listes avec beaucoup d’éléments.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.