Gerador de Fita CSS
Gere um banner de fita de canto dobrado — um rótulo diagonal 'Oferta!'/'Novo'/'Destaque' drapeado no canto de um cartão de produto, com uma sombra de borda dobrada opcional — como CSS pronto para colar, com pré-visualização ao vivo.
Entrada
O rótulo mostrado no banner da fita.
Qual canto do cartão a fita está drapeada.
Dimensiona toda a fita — largura da banda, tamanho da fonte e deslocamentos todos acompanham.
Adiciona um par de triângulos ::before/::after mais escuro onde a fita se dobra para baixo.
Saída
Sua fita aparecerá aqui.
Gêmea com estilos embutidos idêntica à pré-visualização acima (triângulos de sombra de borda como <div> comum, não ::before/::after) — cole em qualquer lugar.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-ribbon-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"ribbonText": "Sale!",
"corner": "top-right",
"ribbonColor": "#e63946",
"textColor": "#ffffff",
"ribbonSize": "140",
"foldShadow": "true"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-ribbon-generator` tool (CSS Ribbon Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-ribbon-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Fita CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
Uma fita de canto é o rótulo diagonal "Oferta!" ou "Novo" drapeado no canto de um cartão de produto, imagem ou bloco de preço. Parece como um pedaço de papel dobrado ao redor da borda da caixa — essa dobra é a parte difícil de acertar em CSS simples. Este gerador escreve tudo para você: escolha um canto, uma cor e um tamanho, e copie a regra terminada.
Como usar
- Digite o texto da fita — rótulos curtos ("Oferta!", "Novo", "-20%") ficam melhores.
- Escolha o canto em que a fita está drapeada.
- Defina a cor da fita e cor do texto.
- Arraste tamanho da fita até que a banda pareça correta na pré-visualização — tudo mais (tamanho da fonte, altura da linha, deslocamentos) é dimensionado com ela.
- Ative/desative a sombra de borda dobrada para os pequenos triângulos mais escuros que fazem a fita parecer papel dobrado em vez de uma caixa girada plana.
- Copie o CSS e o trecho HTML
<div class="ribbon"><span>…</span></div>, ou copie/baixe o HTML com estilo embutido da pré-visualização se quiser algo que não dependa de uma folha de estilos separada.
Como funciona
A fita consiste em dois elementos: um pequeno wrapper quadrado .ribbon fixado no canto com overflow: hidden, e um .ribbon span mais largo girado 45° dentro dele. Apenas a fatia diagonal do span que cai dentro da janela recortada do wrapper é visível, o que dá à banda sua aparência limpa com cantos quadrados em vez de transbordar o cartão. A sombra de borda dobrada adiciona um par ::before/::after no span — dois pequenos triângulos, coloridos em um tom mais escuro da cor da fita, posicionados logo além da borda do próprio span — que são girados junto com tudo mais e parecem papel dobrado nos dois pontos onde a banda sai do quadrado visível.
Privacidade
Tudo é executado no seu navegador — o CSS e HTML são gerados localmente, nada é enviado, e a ferramenta funciona offline após o carregamento da página.
Por que há dois trechos de HTML?
O campo HTML é o markup real, destinado a ser pareado com o bloco CSS por meio dos seletores de classe .ribbon/.ribbon span — é o que você cola em seu projeto. O trecho de pré-visualização é uma cópia separada com estilos embutidos da mesma fita (triângulos de sombra de borda incluídos como <div> comum em vez de ::before/::after) que corresponde exatamente ao que você vê acima — útil se quiser colocá-lo em algum lugar sem enviar uma folha de estilos separada, mas a versão baseada em classes é a que deve ser usada em uma página real.
E se eu precisar de uma forma diferente, não uma fita?
Para um triângulo simples (uma seta, um apontador de dica), use o Gerador de Triângulo CSS. Para uma forma com mais pontos — uma estrela, um hexágono, um contorno de bolha de fala — o Gerador de Clip-Path CSS cria polígonos arbitrários em seu lugar. Para colocar uma sombra projetada sob o cartão em que a fita fica, veja o Gerador de Sombra de Caixa CSS.