Vague au-dessus du pied de page
Gratuit, sans inscription, fonctionne dans votre navigateur.
La même idée qu'un séparateur de héros, à l'envers. La courbe est le bord supérieur du pied de page : le remplissage se trouve donc au-dessus d'elle et se referme sur la couleur du pied de page lui-même.
La recette
| Forme | Vague de pied de page |
|---|---|
| Exporter en | SVG |
| Taille | 551 B |
Étape par étape
- Choisissez Vague de pied de page — elle est déjà retournée verticalement pour cela.
- Réglez le remplissage sur la couleur de fond de votre pied de page.
- Copiez le SVG et placez-le immédiatement au-dessus de l'élément de pied de page.
- Supprimez toute marge entre la forme et le pied de page, sinon un liseré du fond de page apparaît.
Ce que vous allez copier
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 207.13C-300 198.98,-120 174.18,0 158.27C120 142.36,240 112.09,360 111.66C480 111.23,600 137.74,720 155.71C840 173.68,960 218.07,1080 219.5C1200 220.93,1380 173.48,1440 164.28L1440 0L-360 0Z" fill="#a5b4fc" opacity="0.35"/><path d="M-360 116.33C-300 112.14,-120 88.78,0 91.21C120 93.64,240 120.61,360 130.91C480 141.…Plus en détail
Utilisez le miroir vertical plutôt qu'un `transform: scaleY(-1)` en CSS. Le retournement est intégré au tracé : le SVG exporté tient donc tout seul, sans conteneur ni transformation à retenir — ce qui compte surtout si vous passez plus tard à l'export en arrière-plan CSS, où il n'y a de toute façon aucun élément à transformer.
Questions
De quelle forme partir pour Vague au-dessus du pied de page ?
Vague de pied de page, 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 551 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.