# Gerador de fitas e selos

> Fitas laterais com dobra, faixas de canto e marcadores para cards, com um elemento só e a cor que você quiser.

URL: https://dpw.dev/ferramentas/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.

Esta página tem um gerador interativo no navegador. Exemplo: uma fita lateral à esquerda, com 10px de dobra:

```css
/* 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.

Suporte: funciona em todos os navegadores atuais ([Baseline](https://webstatus.dev/features/clip-path)).

## Conceitos Fundamentais de CSS

Elemento com `position: absolute` se posiciona em relação ao ancestral posicionado mais próximo: por isso o card leva `position: relative`. O livro explica posicionamento e blocos de contenção em 237 páginas sobre como o CSS funciona por dentro. [Conheça o livro](https://dpw.dev/livro-conceitos-fundamentais-css/?utm_source=blog&utm_medium=cta_ferramentas)

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml