Des sections non linéaires avec du svg

Comment créer des div non linéaires avec du svg ?

Dans ce petit mémo, je donne l’exemple d’une page à sections, dont les séparateurs sont en fait des figures svg non linéaires.

Pour aller plus vite, j’utilise l’excellent générateur https://getwaves.io/. Cet outil puissant permet de créer en un clic une figure svg comme une diagonale, des vagues arrondies, rectangulaires ou triangulaires !

C’est parti !

Le code html est on ne peut plus simple, et le placement des blocs svg est spécifique à mon exemple. La technique consiste simplement à placer un bloc au dessus et en dessous d’une section. On précise « preserveAspectRatio= »none » si on veut jouer sur la hauteur du svg. Vous pouvez définir vos svg en display:block afin qu’ils servent de séparateur entre les sections. Ainsi on peut charger autant de contenu que souhaité, il ne débordera pas du cadre.

See the Pen
Non Linear Sections With Svg
by yuyazz (@yuyazz)
on CodePen.