1. O Que E um Ribbon CSS

Um ribbon (faixa ou badge de canto) e um elemento visual que aparece diagonalmente no canto de um card ou container, tipicamente exibindo labels como "NOVO", "PROMO", "BETA" ou "DESTAQUE". E amplamente usado em e-commerces, landing pages e dashboards para chamar atencao a itens especificos.

A vantagem de usar CSS puro e que nao e necessario imagens, SVGs externos ou JavaScript — o efeito e obtido inteiramente com position, transform e uma sombra sutil.

2. A Tecnica de Posicionamento

O ribbon usa position: absolute dentro de um container com position: relative; overflow: hidden. A rotacao diagonal e obtida com transform: rotate(45deg) (ou -45deg para outros cantos). O overflow: hidden no container esconde as extremidades da faixa que ultrapassam as bordas arredondadas do card.

"O overflow: hidden no container e o detalhe critico: sem ele, a faixa aparece ultrapassando as bordas do card e o visual fica incorreto."

3. Casos de Uso Comuns

• E-commerce: destacar produtos em promocao, lancamentos ou mais vendidos.
• SaaS: marcar planos recomendados, features em beta ou novidades.
• Portfolios: destacar projetos em destaque ou trabalhos recentes.
• Dashboards: indicar status de itens como "Novo", "Pendente" ou "Urgente".

4. Variantes e Customizacoes

Alem da faixa diagonal classica, existem variantes populares:

• Ribbon com triangulo: usa border para criar um triangulo CSS no canto, mais discreto.
• Ribbon de lado: posicionado verticalmente sem rotacao, mais legivel para textos longos.
• Ribbon animado: adiciona animation: pulse para atrair atencao em lancamentos.

5. Ribbons Responsivos

Em telas pequenas, ribbons muito grandes podem comprometer o layout. Use font-size e dimensoes em em ou vw, ou ajuste com media queries para reduzir o tamanho em mobile. Alternativamente, esconda a ribbon em telas muito pequenas com display: none abaixo de um breakpoint.

6. Perguntas Frequentes

O ribbon funciona com border-radius no card?

Sim, e e exatamente por isso que o overflow: hidden no container e essencial. Ele recorta as pontas da faixa seguindo o formato arredondado do card.

Posso ter multiplos ribbons no mesmo card?

Tecnicamente sim, mas visualmente nao e recomendado. Use no maximo um ribbon por card para nao sobrecarregar o visual.

O ribbon e acessivel?

O texto da ribbon e lido por leitores de tela como qualquer texto. Se o ribbon for puramente decorativo, adicione aria-hidden="true". Se carregar informacao relevante (como "em promocao"), mantenha-o visivel para tecnologias assistivas.

Posso usar o CSS gerado comercialmente?

Sim. O CSS gerado e puro, sem nenhuma restricao de licenca. Use livremente em projetos pessoais e comerciais.