hermes

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>INITIALISATION</span></div>
        <div class="col-md-3 text-center"><span>CONCEPTION</span></div>
        <div class="col-md-3 text-center"><span>REALISATION</span></div>
            <div class="col-md-3 text-center"><span>DEPLOIEMENT</span></div>
      </div>

CSS

.row {
    margin: 1em 2em;
}
.col-md-3 {
    padding: 5px;
    position: relative;
}
.col-md-3 span {
    display: block;
    background: #ccc;
    padding: 3px 6px;
}
.col-md-3:after, .col-md-3:first-child:before, .col-md-3:last-child:before {
    content: "";
    background: url(http://www.benevolat.org/wp-content/themes/FFBA/images/losange_vide.png) no-repeat 50% 50%;
    width: 16px;
    height: 23px;
    position: absolute;
    right: -8px;
    top: 50%;
    margin-top: -12px;
    z-index: 1;
}
.col-md-3:first-child:before {
    left: -8px;
    right: auto;
}
.col-md-3:last-child:before {
    left: 50%;
    right: auto;
    margin-left: -8px;
    top: 0;
}