hermes

by ponsfrilus

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="row">
    <div class="col-md-3 text-center">	<span class="phase">
    		<span class="jalon jalon0">
    			<a href="#"><img src="http://www.benevolat.org/wp-content/themes/FFBA/images/losange_vide.png" /></a>
    		</span>
	<span class="jalon variante">
        		<a href="#"><img src="http://www.benevolat.org/wp-content/themes/FFBA/images/losange_vide.png" /></a>
        	</span>
	<span class="jalon jalon1">
        		<a href="#"><img src="http://www.benevolat.org/wp-content/themes/FFBA/images/losange_vide.png" /></a>
        	</span>
INITIALISATION</span>
    </div>
    <div class="col-md-3 text-center">	<span class="phase">
        	<span class="jalon jalon2">
        		<a href="#"><img src="http://www.benevolat.org/wp-content/themes/FFBA/images/losange_vide.png" /></a>
        	</span>
CONCEPTION</span>
    </div>
    <div class="col-md-3 text-center">	<span class="phase">
   		<span class="jalon prereception">
        		<a href="#"><img src="http://www.benevolat.org/wp-content/themes/FFBA/images/losange_vide.png" /></a>
        	</span>
	<span class="jalon jalon3">
        		<a href="#"><img src="http://www.benevolat.org/wp-content/themes/FFBA/images/losange_vide.png" /></a>
        	</span>
REALISATION</span>
    </div>
    <div class="col-md-3 text-center">	<span class="phase">
		<span class="jalon miseenservice">
        		<a href="#"><img src="http://www.benevolat.org/wp-content/themes/FFBA/images/losange_vide.png" /></a>
        	</span>
	<span class="jalon reception">
        		<a href="#"><img src="http://www.benevolat.org/wp-content/themes/FFBA/images/losange_vide.png" /></a>
        	</span>
	<span class="jalon jalon4">
        		<a href="#"><img...

CSS

.row {
    margin: 1em 2em;
    width: 80%;
}
.col-md-3 {
    padding: 5px;
    position: relative;
}
.col-md-3 .phase {
    display: block;
    background: #ccc;
    padding: 3px 6px;
}
.jalon {
    width: 16px;
    height: 23px;
    position: absolute;
    right: -8px;
    top: 50%;
    margin-top: -12px;
    z-index: 1;
}
.jalon0 {
    left: -8px;
}
.variante {
    left: 50%;
    right: auto;
    margin-left: -8px;
    bottom: 0;
    margin-top: 7px;
}
.prereception {
    left: 75%;
    right: auto;
    margin-left: -8px;
    bottom: 0;
    margin-top: 7px;
}
.miseenservice {
    left: 50%;
    right: auto;
    margin-left: -8px;
    top: 0;
}
.reception {
    left: 75%;
    right: auto;
    margin-left: -8px;
    bottom: 0;
    margin-top: 7px;
}