Html Créer un petit triangle avec css

Résolu/Fermé
Signaler
Messages postés
534
Date d'inscription
lundi 20 mars 2006
Statut
Membre
Dernière intervention
29 août 2014
-
 cnlevy -
Bonjour à tous,

J'essai de trouver si c'est possible de créer un petit triangle en html?

Sur mon site quand un visiteur arrive, j'ai le mot 'Connexion" et j'aimerais afficher une petite flèche a coté du mot "connexion" pour indiquer qu'il y a un sous menu (menu qui apparait lors du mouse over.

Est-ce possible ou dois-je le faire dans photoshop?

MErci!

Pascal_22



15 réponses


salut,
code css:
#triangle{
font-size: 0px; line-height: 0%; width: 0px;
border-top: 100px solid #77c;/* couleur du triangle*/
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
}

et le code html pour tester
<div id="triangle"></div>

modifie la taille pour obtenir le triangle que tu veux
mais attention:
border-left et border-right sont égaux à la moitié du border-top
@+
7
Messages postés
3568
Date d'inscription
mercredi 17 mars 2010
Statut
Contributeur
Dernière intervention
9 janvier 2020
474
+1 j allais poster le même code ;)
0
@Pascal : Pour les triangles en CSS je te conseille de lire le tutoriel sur http://www.bellami.fr/triangles-css
6
En raccourci:
<div style="border-width:10px;border-color: transparent  transparent transparent black ;border-style:solid"></div>
0
Messages postés
3568
Date d'inscription
mercredi 17 mars 2010
Statut
Contributeur
Dernière intervention
9 janvier 2020
474
bonsoir,
que veux tu comme petit triangles ? il y en a un certain nombre comme ça :
◙♀♂♪♫☼►◄↕‼§▬↨↑↓→←∟↔▲▼

en HTML est ce que c'est ce que tu recherches ?

Cordialement Clouds120.


?"la connaissance n'est utile que, si et seulement si, elle est partagée"?

?" on est pas dans un concours de "bits" .... c'est désolant... " ?
0
Messages postés
534
Date d'inscription
lundi 20 mars 2006
Statut
Membre
Dernière intervention
29 août 2014
54
Bonjour Clouds120,

bonsoir, 
que veux tu comme petit triangles ? il y en a un certain nombre comme ça : 
??????????§?????????? en HTML est ce que c'est ce que tu recherches ? 



Ce que je veux dire c'est un petit triangle qui pointe vers la bas, question d'indiquer qu'il y a un autre menu lors du mouseover de ce lien.

Merci!
0
Messages postés
3568
Date d'inscription
mercredi 17 mars 2010
Statut
Contributeur
Dernière intervention
9 janvier 2020
474
ah mince tu ne les vois pas :s

je t'avais mis a l'instant des triangles dirigé vers le bas :s
0
Messages postés
534
Date d'inscription
lundi 20 mars 2006
Statut
Membre
Dernière intervention
29 août 2014
54
non je ne les vois pas!

peux me les écrire avec espace ou autre svp?

PAscal
0
Messages postés
3568
Date d'inscription
mercredi 17 mars 2010
Statut
Contributeur
Dernière intervention
9 janvier 2020
474
je les ai trouvé sur une page de CCM (powered by TLK) va voir la:
=)
regarde s'il y a quelque chose qui te plait ou si on peut trouver un autre triangle du même genre


?"la connaissance n'est utile que, si et seulement si, elle est partagée"?

?" on est pas dans un concours de "bits" .... c'est désolant... " ?
0
Messages postés
534
Date d'inscription
lundi 20 mars 2006
Statut
Membre
Dernière intervention
29 août 2014
54
Merci!

C'est ce que je veux no. 9660(il ne figure pas dans cette liste, je l'ai trouver sur le web) mais il es trop gros, il a le 9662 mais lui est trop petit... :(

Pouvons-nous choisir la grosseur ainsi que la couleur ?

Merci
0
Messages postés
3568
Date d'inscription
mercredi 17 mars 2010
Statut
Contributeur
Dernière intervention
9 janvier 2020
474
pour la couleur, je ne sais pas si la fonction "body {color : XXX} marcherait pour un caractère spécial
0
Messages postés
534
Date d'inscription
lundi 20 mars 2006
Statut
Membre
Dernière intervention
29 août 2014
54
merci de ta réponse.

Mais sinon, pouvons nous créer des graphique (shape) qui nous permetterait de choisir la taille et la couleur?

Merci beaucoup!
Pascal_22
0
Messages postés
3568
Date d'inscription
mercredi 17 mars 2010
Statut
Contributeur
Dernière intervention
9 janvier 2020
474
oui je pense que oui , tu veux un logiciel pour créer ça ?
0
Messages postés
534
Date d'inscription
lundi 20 mars 2006
Statut
Membre
Dernière intervention
29 août 2014
54
non , pas un logiciel, car j'ai créer ma flèche avec PhotoShop, mais c sure que j'aimerais la créer en HTML(css) car il y aurait pas de download/upload pour mon image flèche.

C'est pour une question d'écité de mettre un tas d'image et que ca jam l'upload.


Est-ce possible créer des shape via HTML ou CSS sans passer par photoShop ou autre logiciel de design?6


Merci!
Pascal_22
0
Messages postés
3568
Date d'inscription
mercredi 17 mars 2010
Statut
Contributeur
Dernière intervention
9 janvier 2020
474
je ne sais pas trop si ce topic va pouvoir t'aider car je ne suis pas en mesure de répondre a ta question :s( désolé ) je ne trouve pas le moyen spontanément de résoudre le problème d'image en html il faudrait passer beaucoup de temps pour trouver des ligne de code capable de faire ca

c'est pas ici :=>>
0
Messages postés
534
Date d'inscription
lundi 20 mars 2006
Statut
Membre
Dernière intervention
29 août 2014
54
Merci beaucoup pour ton aide!!

J'apprécis.

Passe une bonne fin de semaine!
PAscal_22
0