Séparateur de section héros
Gratuit, sans inscription, fonctionne dans votre navigateur.
Ce pour quoi on vient le plus souvent ici : une courbe entre un héros coloré et ce qui se trouve en dessous, pour que les deux sections se rejoignent sur une forme plutôt que sur une ligne droite.
La recette
| Forme | Vague douce |
|---|---|
| Exporter en | SVG |
| Taille | 322 B |
Étape par étape
- Ouvrez le générateur et choisissez Vague douce dans la rangée de préréglages.
- Réglez la couleur de remplissage sur la couleur de fond de la section *du dessous*, pas celle du héros.
- Copiez le SVG et collez-le comme dernier élément à l'intérieur de votre héros.
- Donnez-lui `display:block` et `width:100%` pour qu'il couvre toute la largeur sans laisser d'espace dessous.
Ce que vous allez copier
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 137.58C-300 144.27,-120 166.02,0 177.73C120 189.44,240 207.5,360 207.83C480 208.15,600 190.33,720 179.69C840 169.05,960 144.62,1080 143.98C1200 143.34,1380 170.55,1440 175.86L1440 320L-360 320Z" fill="#4f46e5"/></svg>Plus en détail
La couleur est l'étape que les gens ratent. Le séparateur est le bord supérieur de la section *suivante* qui remonte dans le héros : il doit donc porter la couleur de cette section — mettez-y celle du héros et vous obtenez une forme invisible sur son propre fond. Si une ligne d'un pixel apparaît sous la forme, c'est le SVG posé sur sa ligne de base de texte : `display:block` la supprime.
Questions
De quelle forme partir pour Séparateur de section héros ?
Vague douce, exportée en SVG. C'est le couple autour duquel cette page est construite, et l'aperçu ci-dessus est exactement cette forme — mais c'est un point de départ, pas une règle. Tous les curseurs restent actifs dès que vous l'ouvrez.
Combien cela ajoute-t-il à la page ?
Environ 322 octets pour cette combinaison. C'est moins qu'une seule icône et cela ne demande aucune requête réseau, puisque la forme est du balisage et non un fichier image.
Est-ce que ça marchera sur mobile ?
Oui. Un séparateur en vague est réglé pour s'étirer à son conteneur plutôt que conserver ses proportions, et c'est ce qui permet à une seule forme de couvrir n'importe quelle largeur d'écran sans bandes noires. Les blobs gardent leurs proportions, puisqu'un blob étiré n'est qu'une ellipse.
Chaque chiffre et chaque forme de cette page ont été produits en exécutant le générateur au moment de la compilation : ils décrivent donc l'outil que vous vous apprêtez à utiliser, et non une version qui a existé un jour.