Gerador de Divisor de Seção CSS
Crie um divisor de borda de seção decorativo — inclinado, curva, triângulo, seta/divisão, enrolar de página de livro ou nuvens onduladas — a partir de uma forma e cor escolhidas. Copie o SVG, um trecho de CSS background-image ou um bloco HTML pronto para colar. Roda inteiramente no seu navegador.
Entrada
O quanto a borda diagonal desce, como uma porcentagem da altura.
Dimensões
Transformar
Preenchimento
Fundo
Saída
Seu divisor aparecerá aqui.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-section-divider-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"shapeType": "slant",
"slantDepth": "50",
"width": "1200",
"height": "200",
"fillColor": "#464aff",
"fillOpacity": "100",
"bgColor": "#f5f5f5"
}'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-section-divider-generator` tool (CSS Section Divider 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-section-divider-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Divisor de Seção 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
O Gerador de Divisor de Seção CSS cria as bordas de seção em forma que você
vê dividindo seções de herói, rodapés e blocos de conteúdo em páginas de
destino modernas — um inclinado, uma curva única, um triângulo, um entalhe de
seta/divisão, um enrolar de canto de página de livro ou uma fileira de nuvens
onduladas. Ele fornece o resultado de três maneiras: o SVG bruto, um trecho
de CSS background-image e um bloco HTML pronto para colar. Cada forma
é geometria vetorial real, portanto permanece nítida em qualquer tamanho.
Como usar
- Escolha uma forma — inclinado, curva, triângulo/cunha, seta/divisão, enrolar de página de livro ou nuvens.
- Ajuste o controle próprio dessa forma (profundidade de inclinação, profundidade da curva, posição e altura do pico, profundidade do entalhe, tamanho do enrolar ou contagem e altura das saliências).
- Defina a largura e altura da tela.
- Vire a forma verticalmente (para pendurar no topo de uma seção em vez de ficar na base) ou horizontalmente (para espelhar inclinações, picos e enrolar de página de livro para o outro lado).
- Escolha uma cor de preenchimento e opacidade, e uma cor de fundo. Copie qualquer saída que você precise — a visualização é atualizada conforme você trabalha.
As três saídas
- Código SVG — um
<svg>autossuficiente que você pode colocar diretamente em sua marcação ou salvar como um arquivo.svg. A cor de fundo é incorporada como um<rect>, portanto o arquivo parece idêntico em qualquer lugar onde você o abra. - Fundo CSS — a mesma forma codificada em URL em uma regra
background-image: url("data:image/svg+xml,…"), pronta para ser anexada a qualquer elemento como divisor decorativo. - Trecho HTML — um wrapper
<div>com o SVG inline, para colar em uma página sem tocar sua folha de estilos.
Como coloco o divisor no topo de uma seção em vez de na base?
Ative Virar verticalmente. Cada forma é desenhada para ficar na borda inferior da caixa por padrão; virar espelha a área preenchida para que a mesma forma penda da borda superior em vez disso — nenhuma configuração de "posição" separada necessária.
Essas formas serão dimensionadas sem desfoque?
Sim. Tudo é dados de caminho de vetor com preserveAspectRatio="none", portanto
a forma se estende para preencher qualquer largura que você a coloque — de um
telefone a um monitor ultra-largo — sem perda de qualidade.
E se eu quiser um divisor ondulado?
Esta ferramenta cobre as famílias de formas com bordas retas e curvas. Para um divisor ondulado, ondulante — seno, ziguezague, colinas arredondadas, ondas em camadas ou uma bolha orgânica — use o Gerador de Ondas SVG, sua ferramenta irmã construída no mesmo contrato de saída SVG/CSS/HTML.
Privacidade
O gerador roda inteiramente no seu navegador. Suas cores, dimensões e qualquer outra configuração permanecem no seu dispositivo — nada é enviado e nenhuma forma é jamais enviada para um servidor.