div en "flèche", et transition

Par SLK, il y a 9 ans

Les bases HTML/CSS

Bonjour,

J'essaie de faire en sorte qu'un lien de "retour", ressemble plus ou moins à une flèche.
J'ai eu du mal, et j'ai fini par réussir d'une façon un peu étrange.

Je mets un "visuel" ici :
http://hpics.li/06fbc8e

Mon problème c'est que :
J'ai voulu ajouter une transition, au :hover, sur la couleur du fond.
La couleur change bien au :hover, mais SANS transition.
Ce que j'aimerai maintenant, c'est faire fonctionner la transition.

<a class="link_back" href="#">Retour au site</a> .link_back { /* transforme un peu en "flèche" */ background: linear-gradient(135deg, rgba(0, 0, 0, 0) 20px, #3786bd 0%) top left, linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #3786bd 0%) top right, linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #3786bd 0%) bottom right, linear-gradient(45deg, rgba(0, 0, 0, 0) 20px, #3786bd 0%) bottom left; background-repeat: no-repeat; /* En théorie j'aurai du mettre 50% ici, mais ça bugait un peu... En trichant un peu à 53% ça fonctionne mieux... */ background-size: 53%; /* Décoration */ padding: 10px; padding-left: 35px; background-color: #3786bd; border-color: #2d6d99; color: white; -moz-box-shadow: 1.4em 0.4em 0.2em 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 1.4em 0.4em 0.2em 0 rgba(0, 0, 0, 0.2); box-shadow: 1.4em 0.4em 0.2em 0 rgba(0, 0, 0, 0.2); /* Transition (qui ne fonctionne pas) */ -moz-transition: background 1s linear; -o-transition: background 1s linear; -webkit-transition: background 1s linear; transition: background 1s linear; } .link_back:hover { /* Je copie/colle le même code, mais je change la couleur (plus foncée) */ background: linear-gradient(135deg, rgba(0, 0, 0, 0) 20px, #265c82 0%) top left, linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #265c82 0%) top right, linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #265c82 0%) bottom right, linear-gradient(45deg, rgba(0, 0, 0, 0) 20px, #265c82 0%) bottom left; /* Ces 2 lignes, je ne pensais pas devoir les répéter sur le :hover, mais si je ne le fais pas ça ne fonctionne pas... */ background-size: 53%; background-repeat: no-repeat; }

J'ai fais des recherches pour une transition sur linear-gradient,
mais je ne trouve que des linear-gradient classique, alors que la façon dont je m'en suis servis est un peu bizarre.
Je n'arrive plus à avancer,
si quelqu'un peut m'aider,

Merci.

6 réponses

Genki, il y a 9 ans

Et mettre la transition sur le hover, t'as essayé ?

.link_back:hover { // ta transition ici }
SLK, il y a 9 ans

Salut,

oui j'ai essayé, sur l'un, sur l'autre, et sur les 2.

Laznet, il y a 9 ans

Bonjour,
Deux questions :
As-tu essayé de mettre un display:block; (ou inline block selon tes besoins.
De sorte ce a href devienne une div.

As-tu essayé de mettre une transition sur l'état "normal" et sur le hover ? (j'entend par là en même temps).

Sinon peut être l'ordre des paramètres ? Le temps a la fin ?

EDIT - Essayes d'enlever linear.
Et de taper sur Google : MDN transition tu y trouveras peut être une solution.

SLK, il y a 9 ans

Salut,

As-tu essayé de mettre un display:block
Ah effectivement j'ai mis dans le titre : div en "flèche",
mais ce n'est pas vraiment une div en effet, pusique la balise < a > est en display "inline",
mais en fait ce n'est pas ça qui est important, je n'ai pas BESOIN d'utiliser un display particulier.
j'aurai du changer le titre pour : un lien en "flèche", et transition :)

As-tu essayé de mettre une transition sur l'état "normal" et sur le hover ?
Oui, c'est ce que j'ai répondu à Genki ^^

Sinon peut être l'ordre des paramètres ? Le temps a la fin ?
Non, d'après les exemples sur W3Schools, l'ordre est bon.
http://www.w3schools.com/css/css3_transitions.asp

Essayes d'enlever linear
Au début je ne l'avais pas mis, et voyant que ça ne fonctionnait pas je l'ai rajouté pour voir, mais toujours rien.

Et de taper sur Google : MDN transition
Je cherche partout , sur MDN aussi bien sûr, mais malheureusement je ne trouve toujours pas de solution.

Je commence à penser qu'on ne peut pas appliquer de transition sur ce que j'essaie de faire... Zut.

PhiSyX, il y a 9 ans

Yop.
Transitionne sur les couleurs du background (background-color) et change tes background: linear-.. par background-image: linear-... cependant en faisant ça, tu perds ta flèche. (Ce qui est con :^))
Ceci dit tu peux créer une flèche facilement en créant un carré et jouer avec la rotation de ce dernier.
Ex: https://jsfiddle.net/f8xo85gd/

Résultat: sans transition https://jsfiddle.net/f8xo85gd/1/ - avec transition: https://jsfiddle.net/f8xo85gd/2/

Voilà.. ^^

SLK, il y a 9 ans

Salut,

cependant en faisant ça, tu perds ta flèche. (Ce qui est con :^))
Ah oui, moi je veux garder la flèche, c'est le but 1er quand même ^^

tu peux créer une flèche facilement en créant un carré et jouer avec la rotation de ce dernier
Effectivement j'avais commencé par mettre un rectangle et un triangle collé ensemble, tous les 2 dans une div, mais j'avais un peu de mal à les "manipuler proprement" quand je voulais changer des trucs.

Finalement,
avec la méthode des linear-gradient, en plus de ne pas réussir à placer une transition, je me suis rendu compte que le résultat était complètement différent entre Chrome et Firefox.
Alors j'ai laissé tomber cette méthode.

J'ai pu faire quelque chose avec les :before, et :after :
avantages :

  • ressemble vraiment à une flèche cette fois
  • j'ai pu mettre les transition
  • fonctionne bien sur tous les navigateurs (version résente), et même IE

inconvénients :

  • la "bordure" sur la pointe de la flèche est absente sur heu... "l'arrière des côtés" (difficile à expliquer par écrit). Du coup si on met une "bordure" trop large, l'effet est visuelement un peu gênant, je trouve. Ça passe inaperçu avec une bordure fine (1px ou max 2px).
  • les box-shadow ne sont pas pris en compte sur les :after et :before. Là encore, ça passe "relativement" inaperçu si on n'en met pas trop.

Voilà ce que j'ai fais :

je laisse un visuel :
http://zupimages.net/viewer.php?id=16/25/o6xu.jpg

<div class="link_back"> <a href="#">Retour au site</a> </div> /* J'utilise le :after pour faire la pointe de la "flèche", et le :before pour faire une pointe légèrement plus grande, pour simuler une bordure */ .link_back a { position: relative; background-color: #3786bd; border: 1px solid #265c82; color: white; padding: 10px 20px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0.2em 0.2em 0.2em 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0.2em 0.2em 0.2em 0 rgba(0, 0, 0, 0.4); box-shadow: 0.2em 0.2em 0.2em 0 rgba(0, 0, 0, 0.4); -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0; border-radius: 0 5px 5px 0; -moz-transition: background-color 0.4s, border 0.4s; -o-transition: background-color 0.4s, border 0.4s; -webkit-transition: background-color 0.4s, border 0.4s; transition: background-color 0.4s, border 0.4s; } .link_back a:after, .link_back a:before { right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-transition: background-color 0.4s, border 0.4s; -o-transition: background-color 0.4s, border 0.4s; -webkit-transition: background-color 0.4s, border 0.4s; transition: background-color 0.4s, border 0.4s; } .link_back a:after { border-right-color: #3786bd; border-width: 40px; margin-top: -40px; } .link_back a:before { border-right-color: #265c82; border-width: 41px; margin-top: -41px; } .link_back a:hover { background-color: #265c82; border-color: #3786bd; right: 1px; color: white; } .link_back a:hover:after { border-right-color: #265c82; } .link_back a:hover:before { border-right-color: #3786bd; }

Ça reste de la bidouille...
Beaucoup de code pour faire pas grande chose.
Bien que, moi j'utilise compass, alors je vous ai mis le code CSS ici, mais chez moi le code SASS est plus factorisé, et avec des variables, donc plus facile à maintenir, mais tout de même, je trouve que c'est un peu lourd...
Je ne suis pas convaincu par cette méthode mais je vais m'en contenter.