Discussion :

[xor AX AX]

Bonjour,

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



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



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

Code HTML (extrait) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[NoSmoking]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

il suffit d'applique le CSS, par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[jreaux62]

Bonjour,

autre solution :

• CSS triangle generator

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[xor AX AX]

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 :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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é.

[jreaux62]

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

Il faut le passer en absolu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 */
}