Gerador de fitas e selos
Escolha o tipo, o lado e a cor: o gerador monta uma fita lateral com dobra, uma faixa de canto ou um marcador pendurado, cada um com um elemento só dentro do card.
Veja
Fone sem fio
Até 30 horas de bateria e cancelamento de ruído.
R$ 399Copie o código
/* No HTML, a fita é um elemento dentro do card: <span class="ribbon">. */
.card {
position: relative;
}
.ribbon {
background: #e11d48;
border-block-end: 10px solid color-mix(in srgb, #e11d48 60%, #000);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 10px calc(100% - 10px), 10px 100%, 0 calc(100% - 10px));
color: #fff;
inset-block-start: 1rem;
inset-inline-start: -10px;
padding: 0.25rem 0.75rem;
position: absolute;
}O problema
Fita de "Novo" ou "Promoção" no canto de um card costuma vir de uma imagem, de um SVG ou de dois pseudo-elementos empilhados para fazer a dobra. Trocar a cor ou o texto vira trabalho de edição.
As versões só com CSS existem, mas os polígonos do clip-path e a conta para centrar uma faixa girada no canto são difíceis de acertar de cabeça.
Como funciona
A fita lateral passa da borda do card pelo tamanho da dobra, e o pedaço que sobra vira um triângulo mais escuro:
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 10px calc(100% - 10px), 10px 100%, 0 calc(100% - 10px)) A borda de baixo, mais escura, tem a altura da dobra. O polígono mantém dela só o triângulo sob o pedaço que saiu do card, e esse triângulo parece a fita dobrando para trás. A cor da dobra sai de color-mix() com preto.
A faixa de canto põe o centro num ponto da diagonal do canto: inset leva a ponta da faixa até lá, translate: 50% -50% traz o centro para o mesmo ponto e rotate: 45deg gira em volta dele. O card corta as pontas com overflow: clip, que não cria barra de rolagem.
O marcador é um retângulo pendurado no topo com um V recortado embaixo. O texto escolhe sozinho entre preto e branco, pelo contraste com a cor da fita.
Quando usar
- Selos de "Novo", "Promoção" e "Mais vendido" em cards de produto.
- Faixas de "Beta" ou "Em breve" no canto de um card ou de uma imagem.
- Marcadores de favorito, posição em ranking ou destaque numa lista.
- Trocar uma imagem de fita por um elemento que muda de cor e de texto com o tema.
Outras ferramentas
Playground de corner-shape
Teste squircle, bevel, scoop, notch e superellipse() nos cantos e leve o CSS com border-radius e corner-shape.
FormasCalculadora de raios aninhados
Calcule o raio de dentro a partir do raio de fora, do padding e da borda, para cantos concêntricos.
FormasGerador de bordas onduladas
Onda, zigue-zague, festonado, côncavo, serrilhado e ameias na borda de qualquer elemento com mask, no tamanho que você quiser.