Un style « ruban » pour un titre ou une « étiquette »

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 !

 

Poster un Commentaire

avatar
  S’abonner  
Notifier de