EspañolFita de canto e selo em CSS (ribbon e badge)
Escolha o estilo, o texto e o canto. A fita é feita com um elemento só e se ajusta ao tamanho do texto.
Como usar"Mais vendido" no canto do cartão
Disponível em: 
Fita de canto e selo em CSS (ribbon e badge): para que serve
Uma fita no canto destaca o plano mais escolhido, o produto novo ou a promoção sem mudar o resto do cartão. Escolha entre fita diagonal, selo redondo, etiqueta ou faixa dobrada, o texto, o canto, as cores e o tamanho.
O código vem com o cartão de exemplo e o CSS da fita, feita com um único elemento: na diagonal, o cartão corta o que sobra com overflow hidden. A prévia mostra o resultado na hora, e a página explica quando usar cada estilo.
Como usar
- Escolha o estilo e o texto.
- Ajuste o canto, as cores e o tamanho.
- Copie o código.
Quando usar
- Plano em destaque numa tabela de preços.
- Produto novo ou em promoção.
- Selo de desconto sobre fotos.
Perguntas frequentes
Como a fita fica cortada no canto?
O cartão recebe overflow: hidden e position: relative. A fita é um elemento girado 45 graus e posicionado no canto; a parte que sai do cartão some, e fica só a faixa diagonal.
Leitores de tela leem a fita?
Leem, porque o texto está no HTML. Se o selo só repete algo que já está no cartão, você pode marcar a fita com aria-hidden="true" para não ser anunciada duas vezes.
Qual estilo usar?
A fita diagonal chama mais atenção e combina com planos em destaque. O selo redondo é bom para descontos ('-20%') sobre fotos de produtos, e a etiqueta é a mais discreta, boa para listas com muitos itens.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.