[Résolu] Placer une image sur la bordure d'un div ?

Hello,
j'ai 4 div qui correspondent à 4 phases dans un projet. J'aimerais, au début et à la fin de chaque phase qu'un "jalon" (une image en forme de losange) soit placée.

Pour simplifier l'explication, j'aimerais transformer cette image avec les 4 phases en div et les jalons en image:




Pour l'instant mes 4 div sont créés avec bootstrap:

      <div class="row">
        <div class="col-md-3 text-center">INITIALISATION</div>
        <div class="col-md-3 text-center">CONCEPTION</div>
        <div class="col-md-3 text-center">REALISATION</div>
        <div class="col-md-3 text-center">DEPLOIEMENT</div>
      </div>

Et mon image se balade

<img class="jalon" src="losange.png" />

Est-ce que quelqu'un aurait une idée pour créer ces jalons ?

Merci d'avance,
ponsfrilus
Modifié par ponsfrilus (07 May 2015 - 15:19)

tout simplement en les plaçant comme ceci

 <div class="row">
        <div class="col-md-3 text-center"><img class="jalon" src="losange.png" />INITIALISATION<img class="jalon" src="losange.png" /></div>
        <div class="col-md-3 text-center">CONCEPTION<img class="jalon" src="losange.png" /></div>
        <div class="col-md-3 text-center">REALISATION<img class="jalon" src="losange.png" /></div>
        <div class="col-md-3 text-center">DEPLOIEMENT<img class="jalon" src="losange.png" /></div>
      </div>

https://jsfiddle.net/3ceLdeez/
Modifié par JENCAL (07 May 2015 - 16:02)

Salut @JENCAL et merci pour ta proposition,

JENCAL a écrit :
https://jsfiddle.net/3ceLdeez/

Bien sur sur une page statique ça pourrait le faire mais dans mon cas, le fiddle du résultat serait plutôt:
https://jsfiddle.net/ponsfrilus/w68myL6L/2/embedded/result/

voir https://jsfiddle.net/ponsfrilus/w68myL6L/2/ pour le code.

J'ajoute que je serais ravis d'avoir une méthode qui me permet également d'ajouter le jalon "mise en service"...

Peut-être que je devrais essayer de jouer avec les z-index... ?
Modifié par 6l20 (08 May 2015 - 10:42)

Hello!

tu ne t'en sortiras pas sans un peu de CSS qui va bien. Du coup pourquoi pas nettoyer et enlever les images dans le code qui ne servent à rien et les ajouter en CSS ?
https://jsfiddle.net/w68myL6L/3/embedded/result/

p.s. Ponsfrilus de la resistance? salut ami bleu!
Modifié par 6l20 (08 May 2015 - 10:46)

Hello @kustolovic,
"resistance spotted" .

Merci pour ta solution, le rendu est parfait ! L'idée des images était de pouvoir ajouter un tooltip sur les jalons, avec un lien.

A moins que tu aies une idée pour placer un "a href" sur le jalon je vais me débrouiller avec ça !

Merci beaucoup

Ah ok en effet c'est plus logique d'avoir les images alors. Le CSS reste à peu près le même, il faut juste cibler les différentes images au lieu de faire des :after et :before

Re,
à toute fin ludique (et peut-être pédagogique aussi) voici la version avec images:
https://jsfiddle.net/ponsfrilus/0hrhzmt0/3/embedded/result/

(code: https://jsfiddle.net/w68myL6L/3/)

A+
http://forum.alsacreations.com/upload/226-hermesphases.png

Modifié par ponsfrilus (09 May 2015 - 11:27)