Generatore di Divisori SVG
Genera divisori SVG per sezioni all'istante. Scegli triangolo, diagonale, zigzag, curva o freccia — copia lo snippet HTML e usalo tra le sezioni della pagina.
① Scegli una forma ② Imposta altezza e colore di riempimento ③ Copia l'HTML SVG
Colore di riempimento
#C9B89A
Come funziona
Ogni divisore è un SVG a larghezza piena con preserveAspectRatio="none". Le coordinate del poligono o del path sono definite in un viewBox che corrisponde all'altezza, quindi la forma riempie qualsiasi larghezza del contenitore.
Opzioni di capovolgimento
Capovolgi verticalmente ribalta la forma capovolta usando transform: scaleY(-1). Capovolgi orizzontalmente la ribalta sinistra-destra usando scaleX(-1). Entrambi possono essere combinati per 4 orientamenti per forma.
Utilizzo
Posiziona l'SVG tra due sezioni. Imposta il colore di riempimento per corrispondere alla sezione sottostante. Per la copertura completa, aggiungi display:block per rimuovere il gap inferiore predefinito dell'SVG.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 80" preserveAspectRatio="none" width="100%" height="80" style="display:block">
<g fill="#c9b89a">
<polygon points="-500,80 720,0 1940,80" />
</g>
</svg>
Cos'è un divisore SVG per sezioni?
Un divisore SVG per sezioni è una forma vettoriale scalabile posizionata tra due sezioni di pagina per creare una transizione visiva fluida. Forme comuni includono triangoli, tagli diagonali, zigzag, curve e frecce. Poiché il divisore è definito in SVG con preserveAspectRatio="none", si estende a qualsiasi larghezza del contenitore mantenendo l'altezza esatta. Questa tecnica non richiede immagini — il polygon o path SVG è incorporato direttamente nell'HTML.
Domande frequenti
Un divisore SVG per sezioni è una grafica vettoriale scalabile posizionata tra due sezioni di pagina per creare una transizione visiva fluida. A differenza di un bordo o linea, i divisori usano forme come triangoli, curve o zigzag per separare le sezioni con un bordo decorativo.
L'attributo SVG preserveAspectRatio="none" dice al browser di estendere il contenuto SVG per riempire esattamente le dimensioni del suo contenitore, ignorando il rapporto d'aspetto originale. Questo fa sì che il divisore si estenda a qualsiasi larghezza di pagina mantenendo l'altezza pixel esatta impostata.
Un divisore a curva usa un path Bezier cubico fluido ancorato al centro superiore del viewBox, creando un singolo arco delicato. Un divisore a onda (tool separato) usa un path sinusoidale con più picchi e valli ripetuti su tutta la larghezza.
Imposta il colore di riempimento in questo tool per corrispondere esattamente al background-color della sezione sottostante al divisore.
Sì. Ogni forma ha 4 possibili orientamenti attraverso la combinazione di capovolgimento verticale e orizzontale. Questo significa 5 forme × 4 orientamenti = 20 divisori visivi unici.
Incolla l'HTML SVG direttamente tra i due tag section. Assicurati che l'SVG abbia display:block per eliminare il piccolo spazio che i browser aggiungono sotto gli elementi SVG inline.
Sì. L'SVG inline fa parte del DOM HTML e non richiede richieste HTTP. I motori di ricerca lo leggono come HTML, e poiché i divisori tipicamente non contengono testo, non hanno impatto SEO negativo.