Ajouter une "row" tous les x articles sur wordpress

Les pseudos éléments css

Les pseudos éléments css

Dans ce petit tuto, on va voir comment font certains pour créer des one page originales, avec ce système de flèche séparant chaque section de la page:

voici un exemple de ce qu’on veut faire :

arrow bottom

On définit un padding ou une height pour chaque bloc  de contenu.

On définit les règles pour les pseudos éléments dans leur ensemble, chaque section aura donc une flèche transparente, et ensuite, une surcouche de css viendra homogénéiser la couleur des flèches correspondantes.

See the Pen bottom triangle css by yuyazz (@yuyazz) on CodePen.


Comme on le voit ici, chaque section (second, third etc) doit avoir son pseudo élément, précisant pour chacun sa border color. Ainsi, les flèches conservent la même couleur  que leur section correspondante.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.