SVG / Sections

Séparateur de formes SVG : bords et calques de section

Générez huit formes de séparation de section en SVG avec une amplitude, une fréquence, une hauteur, des retournements, un remplissage inversé et jusqu'à trois calques. Prévisualisez la section et copiez le SVG, le CSS et le HTML.

Séparateur de formes SVG : bords et calques de section: Choisissez un bord en forme de vague, de courbe, d'inclinaison, de triangle, de flèche, de zigzag, de nuage ou de montagne, ajustez sa hauteur, son amplitude et ses répétitions, retournez-le ou inversez-le, puis superposez jusqu'à trois calques. Le séparateur s'adapte à toute largeur de page ; copiez le SVG, le CSS de positionnement ou une section HTML prête à l'emploi. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.

Catégorie
Outils développeur
Exécutions
Dans votre navigateur
Coût
Gratuit · sans inscription
Disponibilité
Prêt à l'emploi
Séparateur de formes SVGTraitement local

Fonctionne entièrement dans votre navigateur

Aperçu de la section

Pour changer de décor.

Une bordure découpée entre deux sections.

Séparateur de section
Code 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>
Positionnement 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%; }
Section 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>

Utilisez la couleur d'arrière-plan de la section suivante pour obtenir une bordure continue. Retournez verticalement le séparateur lorsque vous le déplacez du bas vers le haut.

Chemins fermés et coordonnées

SVG 2 définit les commandes closepath et les chemins cubiques : https://www.w3.org/TR/SVG2/paths.html . La viewBox associe ces coordonnées à la zone d'affichage : https://www.w3.org/TR/SVG2/coords.html

Origine des formes

La forme d'onde utilise les mêmes courbes lisses que SVG Wave Generator et SVG Blob Generator ; les autres profils sont tracés à partir de formules simples. Aucune illustration tierce n'est incluse : vous pouvez donc utiliser le résultat comme bon vous semble.

Comment l'utiliser

  1. Choisissez une forme et ajustez son amplitude, sa fréquence et sa hauteur.
  2. Définissez les calques, leur opacité et leur couleur, puis sélectionnez le bord de section et les éventuels retournements.
  3. Copiez le SVG, le CSS de positionnement et le HTML de la section, ou téléchargez le SVG.

Confidentialité et limitations

La génération des formes et les téléchargements s'effectuent entièrement dans votre navigateur.

Outils associés

Vague SVGblob SVGmotif CSS

Questions fréquentes

Comment faire en sorte que le bord se fonde dans une autre section ?

Utilisez la couleur d'arrière-plan de cette section comme couleur de remplissage du séparateur. Le CSS réserve l'espace nécessaire au séparateur et le positionne de manière absolue sur le bord choisi.

Quelle est la différence avec l'outil de vagues ?

Cet outil ajoute sept autres formes, l'inversion et le HTML de section. SVG Wave Generator propose des vagues aléatoires ainsi que des réglages supplémentaires propres aux vagues. SVG Blob Generator crée des formes organiques indépendantes.

Que fait l'option d'inversion ?

L'inversion ferme le tracé vers le haut plutôt que vers le bas. Elle conserve le bord de séparation à sa place. Le retournement vertical reflète toute la forme.

Outil gratuit · dans votre navigateur exécutions · aucun compte requis