28172 sujets

CSS et mise en forme, CSS3

Puce triangle sur navigation

Bonjour,

Pour ma bare de navigation, je suis parvenu laborieusement à obtenir un effet de sphère en hover au dessus de mes rubriques mais impossible de remplacer la sphère par un triangle Smiley ohwell

Le css qui fonctionne avec la sphère :
#main-navigation ul.menu > li > a:after {
		  content: "";
		  margin: -130px auto 0 auto;
		  text-align: center;
		  width: 50px;
		  height: 50px;
		  background-color: rgba(0, 0, 0, 0 );
		  border: 0px solid white;
	  	border-radius: 25px;
		  display: block;
			-webkit-transition: background-color 0.5s linear;
			   -moz-transition: background-color 0.5s linear;
				 -o-transition: background-color 0.5s linear;
					transition: background-color 0.5s linear;
	  }
#main-navigation ul.menu > li:hover > a:after {
		  background-color: rgba(255, 255, 255, 0.5 ); 
	  }

Comment remplacer ma petite sphere (border-radius) par un petit triangle ?
Bonjour.

Dans ce fil : lien
Felipe a mis un lien vers une page qui explique comment créer des triangles de manière fort astucieuse en CSS.

Smiley smile
Merci Zelena, je suis impressionné par le résultat de Felipe, je ne pensais même pas qu'on pouvait aller jusque là en css !!! Bon après, mon besoin est beaucoup plus modeste, juste remplacer mon rond par un triangle tout en conservant l'effet de transition.
Mes dernières tentatives ne sont pas très concluantes, est-ce que tu pourrais juste me mettre sur une piste ? Smiley rolleyes
Oui, c'est exactement ce que je souhaite obtenir en terme de forme, MERCI !, mais si j'obtiens bien un triangle, je n'arrive pas à retrouver l'effet d'affichage progressif que j'obtenais avec mon rond Smiley ohwell
J'en suis là :
#main-navigation ul.menu > li > a:after {
		  content: "";
		  margin: -130px auto 0 auto;
		  text-align: center;
		  width: 50px;
		  height: 50px;
		  background-color: rgba(0, 0, 0, 0 );
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid white;
		  display: block;
			-webkit-transition: boder-color 0.5s linear;
			   -moz-transition: boder-color 0.5s linear;
				 -o-transition: boder-color 0.5s linear;
					transition: boder-color 0.5s linear;
	  }
#main-navigation ul.menu > li:hover > a:after {
		  background-color: rgba(255, 255, 255, 0.5 ); 
	  }


...et j'obtiens :
- un début de triangle blanc en haut
- en survol, le même bout de triangle mais en fond, un carré (aux dimensions du triangle) qui prend l'effet d'opacité Smiley biggol
goudurisc a écrit :

[code=css]
-webkit-transition: boder-color 0.5s linear;
-moz-transition: boder-color 0.5s linear;
-o-transition: boder-color 0.5s linear;
transition: boder-color 0.5s linear;


Vous voulez dire :
transition: border-color 0.5s linear;

Smiley smile
Modérateur
il y a aussi que c'est bgcolor qui est modifiée au survol et non pas le border-color Smiley smile .

#main-navigation ul.menu > li > a:after {
		  content: "";
		  margin: -130px auto 0 auto;
		  text-align: center;
		  width: 0px;/* modifié*/
		  height: 0px;/* modifié*/
	border-left: 25px solid transparent;;/* modifié*/
	border-right: 25px solid transparent;;/* modifié*/
	border-top: 25px solid  rgba(0, 0, 0, 0 );/* modifié*/
		  display: block;
			-webkit-transition: border-color 0.5s linear;/* corrigé comme le souligne zelena */
			   -moz-transition: border-color 0.5s linear;;/* corrigé comme le souligne zelena */
				 -o-transition: border-color 0.5s linear;;/* corrigé comme le souligne zelena */
					transition: border-color 0.5s linear;;/* corrigé comme le souligne zelena */
	  }
#main-navigation ul.menu > li:hover > a:after {
		  border-top: 25px solid  rgba(255, 255, 255, 0.5 ); /* modifié*/
	  }
Magnifique gcyrillus !!! Que c'est beau la science quand c'est propre et maîtrisé Smiley cligne Smiley cligne Smiley cligne
C'est top maintenant et je pense que je n'y serais pas arrivé de si tôt par moi-même Smiley rolleyes
Merci pour le cadeau et très bonnes fêtes !

Et bien entendu, merci également Zelena !!!
Modifié par goudurisc (18 Dec 2016 - 23:19)
Sujet clos
Aller à