Skip to main content

Générateur de vagues CSS Générer des diviseurs de sections en forme de vague SVG avec des vagues, une hauteur et des couleurs personnalisables.

Générateur de vagues CSS illustration
🎨

Générateur de vagues CSS

Générer des diviseurs de sections en forme de vague SVG avec des vagues, une hauteur et des couleurs personnalisables.

1

Configurer les propriétés de la vague

Définissez le nombre de vagues, la hauteur, la couleur et l'opacité.

2

Prévisualiser le diviseur

Voyez la vague entre deux sections colorées et basculez la direction de retournement.

3

Copier le code

Copiez le HTML et le CSS pour le diviseur de section en forme de vague.

Loading tool...

What Is Générateur de vagues CSS?

Le générateur de vagues CSS crée des diviseurs de sections en forme de vague basés sur SVG pour des transitions organiques et fluides entre les sections de page. Les vagues sont l'un des styles de diviseurs de sections les plus populaires dans la conception Web moderne, remplaçant les lignes horizontales rigides par des courbes fluides. Cet outil génère des éléments de chemin SVG à l'aide de courbes de Bézier qui créent des formes de vagues naturelles. Vous pouvez contrôler le nombre de vagues, la hauteur totale, la couleur de la vague, la couleur de fond, l'opacité et la direction de retournement vertical. L'aperçu montre la vague positionnée entre deux sections colorées afin que vous puissiez voir exactement comment elle transite entre les zones de contenu. Le code généré inclut à la fois le balisage SVG et le CSS nécessaire pour positionner et styliser le diviseur de vague.

Why Use Générateur de vagues CSS?

  • Comptage de vagues, hauteur et couleur ajustables pour une personnalisation complète
  • Basculement pour les diviseurs de sections supérieures ou inférieures
  • Prévisualisation entre des sections colorées pour une visualisation réaliste
  • Le code généré inclut à la fois le SVG et le CSS de positionnement

Common Use Cases

Diviseurs de sections

Créez des transitions fluides entre les sections de page de couleurs différentes.

Transitions de pied de page

Ajoutez des diviseurs en forme de vague au-dessus des sections de pied de page pour un flux visuel.

Fond de section héroïque

Effectuez la transition des sections héroïques vers le contenu avec des formes de vagues.

Séparateurs de sections de fonctionnalités

Séparez les sections de fonctionnalités avec des diviseurs en forme de vague organique.

Technical Guide

Les vagues SVG utilisent l'élément de chemin avec des commandes de courbe cubique de Bézier (C) pour créer des formes fluides et régulières. La zone de visualisation SVG est définie sur "0 0 100 100" avec preserveAspectRatio="none" pour étirer la vague sur toute la largeur du conteneur tout en maintenant la hauteur spécifiée. La forme de la vague est générée en calculant les points de contrôle de Bézier le long de l'axe horizontal, en alternant la position verticale pour créer des pics et des vallées. Le nombre de vagues contrôle le nombre d'oscillations complètes qui apparaissent. La hauteur contrôle l'amplitude des vagues. Pour l'effet de transition, le chemin se ferme en bas (ou en haut lorsque retourné) pour créer une forme remplie. Le positionnement CSS (largeur : 100 %, affichage : bloc) garantit que le SVG s'étend sur toute la largeur du conteneur. La transformation : scaleY(-1) peut retourner verticalement la vague.

Tips & Best Practices

  • 1
    Utilisez 2-4 vagues pour des diviseurs élégants et propres
  • 2
    Faites correspondre la couleur de la vague à la section ci-dessous pour des transitions sans couture
  • 3
    Utilisez une opacité inférieure à 100 % pour les effets de couches de vagues
  • 4
    Combinez plusieurs vagues à différentes opacités pour obtenir de la profondeur

Related Tools

Frequently Asked Questions

Q Les vagues SVG sont-elles responsives ?
Oui, avec preserveAspectRatio="none" et width: 100%, la vague s'étend pour s'adapter à n'importe quelle largeur de conteneur.
Q Puis-je superposer plusieurs vagues ?
Oui, empilez plusieurs vagues SVG avec différentes couleurs et opacités pour un effet d'océan en couches.
Q Comment faire pour retourner la vague ?
Basculez la case à cocher de retournement ou utilisez transform: scaleY(-1) dans le CSS pour inverser la direction de la vague.
Q Puis-je animer la vague ?
Oui, utilisez les animations CSS pour animer le chemin SVG ou translatez la vague horizontalement pour un effet d'eau en mouvement.
Q Quelle hauteur dois-je utiliser ?
80-120px convient bien pour des diviseurs subtils. Utilisez 150-200px pour des transitions de vagues plus dramatiques.

About This Tool

Générateur de vagues CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.