[Résolu] Comment réaliser ça en css ?

Bonjour à tous

Dans l'ancienne version du site on avait des blocs de texte ayant l'apparence suivante :

Pour l’œil ce n'est pas difficile, je le mets dans un ::before content:url()
Par contre je ne vois pas comment réaliser l'onglet au dessus à gauche.
Dans la version précédente, c'était fait avec des <table> et l'onglet est une image.

Merci de vos propositions
Modifié par PapyJP (07 May 2023 - 13:28)

Bonjour,

il te reste le pseudo::after pour insérer cette image en la positionnant en absolu a partir de ta boite en relative et en degageant une marge haute suffisante.

Cdt

Hello,

Le CSS n'est pas ma spécialité, mais je me prête au jeu, alors voilà une proposition sur un CodePen

Pour le titre "Coup d'œil", tu peux créer un triangle avec des borders sur le :after du titre puis le positionner à la fin.

Il y a sûrement mieux comme solution mais l'exercice est intéressant

Merci de cette réponse qui m’a l’air très bien.
Je vais l’essayer dans mon contexte pour voir si je peux intégrer ça.

Le pseudo élément reste une technique tout à fait valable, mais en raison de leurs modularités je préfère désormais les clip-path. Par exemple :

clip-path: polygon(0% 0%, calc(100% - 1em) 0%, 100% 100%, 0 100%);

Très bonne remarque, je n'ai jamais exploré les clip paths jusqu'à présent.
Mais le propriétaire du site a changé d'avis : il voulait faire revivre les "clins d’œil" que nous avions abandonnés en faisant la nouvelle version du site, et tout réfléchi il n'y tient plus!!!
Je verrai ça en arrière plan.