Un triangle dans le coin supérieur gauche

Bonjour,

Je cherche à placer un petit triangle dans le coin supérieur gauche de chaque cellule d'un tableau.
Et évidemment, les tailles de mes cellules sont variables et je ne maitrise pas ce qu'il y a écrit dedans (sinon, ce serait hyper beaucoup trop simple pour les pro que nous sommes tous sur ce forum....)

J'ai pensé à mettre une image <img src="triangle.png" class="triangle" /> que je "cale" dans le coin avec un truc du genre :

float: left;
margin-left: -5px;
margin-top: -1px;

Mais cela ne me plait pas (du moins ces marges négatives) et ce n'est pas bon sur toute mes cellules.

Avez-vous une meilleure idée ?

Merci au chocolat (avec des kiwis dedans !)

Bonjour,

si tu ne veux pas de souci de positionnement ultérieur (avec les vieux IE et avec du contenu trop à proximité), un div supplémentaire dans la cellule et contenant ton contenu sera la solution la plus simple.
Ensuite tu peux utiliser position: absolute; left: 0; top: 0; edit: et un triangle fait avec la technique de la bordure. top et left une couleur, right et bottom du transparent.
Modifié par Felipe (27 Mar 2013 - 02:43)

Bonjour,

Merci pour la réponses.

Je ne vois pas trop ce que va apporter le div avec le contenu de ma cellule.

A+ / F.

Bonjour,

Puisqu'il s'agit d'un élément de décoration, pourquoi utiliser la balise <img /> si elle n'apporte aucune information permettant de comprendre le contenu de la page ?

Personnellement, j'appliquerai tout simplement le triangle en image de fond à chaque cellule :

td {
   background: url('triangle.png') top left no-repeat;
}

EDIT : Après il suffit d'ajouter un padding top et left pour que le texte ne se superpose pas au triangle.
Modifié par Javert67 (27 Mar 2013 - 16:52)

Bonjour,

Kleduts a écrit :
Je ne vois pas trop ce que va apporter le div avec le contenu de ma cellule.

Comme te l'indique Felipe, l'ajout d'un div te permettra de positionner ton triangle en position absolute. Ce qui n'est pas possible dans une cellule de tableau.

Javert67 a écrit :
Personnellement, j'appliquerai tout simplement le triangle en image de fond à chaque cellule :

J'ai cru comprendre qu'il voulait que son triangle sorte de la cellule. C'est bien cela Kleduts ?
Modifié par benj (27 Mar 2013 - 16:57)

Et avec un pseudo élément :before/:after?