Dessiner en CSS un triangle en coin de block pour indiquer une case cliquable

Version imprimable

2 pièce(s) jointe(s)

Bonjour,

Dans une grille d'affichage, je cherche à obtenir cela pour indiquer une case cliquable :

Pièce jointe 605130

C'est plus discret et efficace que ce que je peux faire actuellement :

Pièce jointe 605131

C'est moche (j'injecte le caractère).

Code HTML (extrait) :
Code:

1 2 3 4 <div id="$taskList10Task" title="Voir l'historique de la tâche 10" style="height:3vh; width:8vw; float:left; box-sizing:border-box; overflow-x:hidden;" onclick="_$planning.history(10);" class="taskCanLaunch borderRight borderTop isLink"> <div id="taskList10Task" class="smartFit" style="width: 100%; height: 100%; font-size: 24px; line-height: 24px;">10▸ </div> </div>
CSS (extrait) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 .taskCanLaunch { color: red; font-weight: 600; } .isLink { cursor: pointer; } .borderRight { border-right: 1px solid black; } .borderLeft { border-left: 1px solid black; } .borderTop { border-top: 1px solid black; } .borderBottom { border-bottom: 1px solid black; }
Les tag <style> sont utilisés (je sais, ce n'est pas académique) car je génère à la volée les caractéristiques de la div selon des données variables (fichier définissant les divers écrans, taille du texte à afficher...).

Je cherche le plus simple possible et le moins gourmand en ressources. Je ne peux pas utiliser les couleurs de fond ou de texte car elles servent à indiquer des statuts/sources.

Merci de vos (éventuelles) réponses.

Bonjour,
c'est typiquement le genre de chose que l'on peut résoudre avec un pseudo-élément :before et la propriété CSS clip-path.

Avec le HTML suivant :

Code:

<div class="cadre"></div>

il suffit d'applique le CSS, par exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 .cadre { width: 10em; height: 5em; border: 1px solid #888; } .cadre:before { content: ""; display: block; width: 1em; height: 1em; background: #080; clip-path: polygon(0 0,100% 0,0 100%); }
pour obtenir ce que tu cherches.

Ressources :

Le pseudo-élément :before
La propriété clip-path

Bonjour,

autre solution :

CSS triangle generator

Code:

1
2
3
4
5
6
7
8
.cadre:before {
  content: "";
  display: block;
  width: 0; height: 0;
  border-style: solid;
  border-width: 1em 1em 0 0;
  border-color: #080 transparent transparent transparent;
}

22/09/2021, 13h53
xor AX AX

1 pièce(s) jointe(s)

Merci, solution intermédiaire
Bonjour,

Merci de ces réponses rapides.

J'ai testé ces 2 solutions qui fonctionnent mais comme cela passe par un border, l'inconvénient est que la surface utile du bloc diminue d'autant pour le contenu texte.

J'adopte donc pour l'instant une version intermédiaire qui a cela comme rendu :

Pièce jointe 605162
Code:

1 2 3 4 5 6 7 8 9 .cadre::before { content:"■"; display:block; width:0; height:0; position:relative; top:-9px; left:-4px; }
Le petit + : le caractère prend la couleur de texte de la div.

Merci de vos contributions qui m'ont beaucoup aidé.

Citation:

Envoyé par xor AX AX

...l'inconvénient est que la surface utile du bloc diminue d'autant pour le contenu texte...

Il faut le passer en absolu :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.cadre {
  position:relative; /* le conteneur doit être positionné */
  width: 10em;
  height: 5em;
  border: 1px solid #888;
}
 
.cadre:before {
  position:absolute; top:0; left:0; /* positionnement absolu */
 
  content: "";
  display: block;
  width: 0; height: 0;
  border-style: solid;
  border-width: 1em 1em 0 0;
  border-color: #080 transparent transparent transparent;
 
  z-index:-1; /* sous le texte */
}