div en "flèche", et transition

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.