Sur un site, nous voulions mettre en avant la catégorie des différents articles. Nous avons donc placé cette catégorie dans un élément qui débordait légèrement à gauche de l’image mise en avant dans l’article. Puis nous avons voulu rendre ce débordement plus joli, d’où l’idée d’un aspect “ruban”. Le résultat paraissait joli, mais ce fut une belle galère de trouver comment faire ! 

La situation initiale

Le style initial

Déjà pas mal mais on voulait améliorer.

Le problème

Lorsqu’on cherche sur internet comment réaliser un “ribbon”, on trouve plein de générateurs. Ci-dessous une copie d’écran après avoir tapé “css ribbon” dans Google.

Recherche "css ribbon"

Le seul inconvénient est que la plupart des options proposées utilisent des images pour faire la forme sur le côté ou des éléments <div> qui contraignent à modifier le code html des pages concernées. Je voulais une solution purement CSS.

Les essais

J’ai cherché longtemps à comprendre comment fonctionnaient les solutions avec ajout d’un div. Une fois compris, j’ai essayé de faire la même chose en ajoutant ::before  à l’élément.

Ci-dessous les différents essais sur Codepen.

Noter en particulier les deux derniers essais. Ci-dessous un schéma manuscrit qui explique un peu comment on règle les différents éléments :

réglages d'un "ruban"

Le résultat

Le résultat "ruban"

Et voilà, un problème résolu de plus !

 

0 0 vote
Article Rating
0
Would love your thoughts, please comment.x
()
x