Nastro d’angolo e sigillo in CSS (ribbon e badge)
Scegli lo stile, il testo e l’angolo. Il nastro è fatto con un solo elemento e si adatta alla dimensione del testo.
Come si usa«Più venduto» nell’angolo della scheda
Disponibile in: 
Nastro d’angolo e sigillo in CSS (ribbon e badge): a cosa serve
Un nastro nell’angolo mette in evidenza il piano più scelto, il prodotto nuovo o la promozione senza cambiare il resto della scheda. Scegli tra nastro diagonale, sigillo rotondo, etichetta o fascia piegata, il testo, l’angolo, i colori e la dimensione.
Il codice include la scheda di esempio e il CSS del nastro, fatto con un solo elemento: in diagonale, la scheda taglia ciò che avanza con overflow hidden. L’anteprima mostra subito il risultato, e la pagina spiega quando usare ogni stile.
Come si usa
- Scegli lo stile e il testo.
- Regola l’angolo, i colori e la dimensione.
- Copia il codice.
Quando usarlo
- Piano in evidenza in una tabella di prezzi.
- Prodotto nuovo o in promozione.
- Sigillo di sconto sulle foto.
Domande frequenti
Come viene tagliato il nastro nell’angolo?
La scheda riceve overflow: hidden e position: relative.
Gli screen reader leggono il nastro?
Sì, perché il testo è nell’HTML. Se il sigillo ripete solo qualcosa che è già nella scheda, puoi segnare il nastro con aria-hidden=true per non farlo annunciare due volte.
Quale stile usare?
Il nastro diagonale attira più attenzione e si abbina ai piani in evidenza. Il sigillo rotondo è adatto agli sconti («-20%») sulle foto dei prodotti, e l’etichetta è la più discreta, ottima per elenchi con molti elementi.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.