SVG / Sezioni

Divisore sagomato SVG: bordi e livelli delle sezioni

Genera otto forme SVG per i divisori di sezione con ampiezza, frequenza, altezza, capovolgimenti, riempimento invertito e fino a tre livelli. Visualizza l'anteprima della sezione e copia SVG, CSS e HTML.

Divisore sagomato SVG: bordi e livelli delle sezioni: Scegli un bordo a onda, curva, inclinato, triangolare, a freccia, zigzag, nuvola o montagna, regola altezza, ampiezza e ripetizioni, capovolgilo o inverti il riempimento, quindi sovrapponi fino a tre livelli. Il divisore si adatta a qualsiasi larghezza della pagina: puoi copiare l'SVG, il CSS di posizionamento o una sezione HTML già pronta. Funziona al 100% localmente nel browser, senza caricare file sul server.

Categoria: Strumenti per sviluppatori
Esecuzioni: Nel browser
Costo: Gratuito · senza registrazione
Disponibilità: Pronto all'uso

Separatore sagomato SVGElaborazione locale

Funziona interamente nel browser

Anteprima della sezione

Per cambiare ambiente.

Un bordo sagomato tra due sezioni.

Codice SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg>

Posizionamento CSS

.section { position: relative; overflow: hidden; padding-bottom: 160px; }
.section-divider { position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; pointer-events: none; }
.section-divider svg { display: block; width: 100%; height: 100%; }

Sezione HTML

<section class="section">
  <div class="section-divider" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg></div>
</section>

Usa il colore di sfondo della sezione successiva per creare un bordo continuo. Rifletti verticalmente quando sposti un separatore inferiore in alto.

Tracciati chiusi e coordinate

SVG 2 definisce i comandi closepath e per i tracciati cubici: https://www.w3.org/TR/SVG2/paths.html . Il viewBox associa queste coordinate all'area di visualizzazione: https://www.w3.org/TR/SVG2/coords.html

Origine delle forme

La forma a onda usa le stesse curve morbide di SVG Wave Generator e SVG Blob Generator; gli altri profili sono disegnati con formule semplici. Non sono incluse grafiche di terze parti, quindi puoi usare liberamente il risultato.

Come usarlo

Scegli una forma e regola ampiezza, frequenza e altezza.
Imposta livelli, opacità e colore, poi seleziona il bordo della sezione e gli eventuali capovolgimenti.
Copia l'SVG, il CSS di posizionamento e l'HTML della sezione, oppure scarica l'SVG.

Privacy e limitazioni

La generazione delle forme e i download avvengono interamente nel tuo browser.

Strumenti correlati

Domande frequenti

Come posso fare in modo che il bordo si fonda con un'altra sezione?

Usa per il riempimento del divisore il colore di sfondo dell'altra sezione. Il CSS riserva spazio al divisore e lo posiziona in modo assoluto sul bordo scelto.

Qual è la differenza rispetto allo strumento per le onde?

Questo strumento aggiunge altre sette forme, l'inversione e l'HTML della sezione. Il generatore di onde SVG esistente offre onde casuali e altri controlli specifici per le onde. Il generatore di blob SVG crea forme organiche indipendenti.

Cosa fa l'inversione?

L'inversione chiude il tracciato verso l'alto anziché verso il basso, mantenendo il bordo divisorio nella stessa posizione. Il capovolgimento verticale riflette invece l'intera forma.

Strumento gratuito · nel browser esecuzioni · senza account