Как сверстать такое?

by Usermane

HTML

<ul class="process">
    <li class="process-item">
        <div class="process-inner">
            <div class="process-info">
               <i class="process-image"></i>
               <h3 class="process-title">Принятие решения об инвестировании</h3>
           </div>
       </div>
   </li>
   <li class="process-item">
    <div class="process-inner"> 
     <div class="process-info">
        <i class="process-image"></i>
        <h3 class="process-title">Выбор местоположения мойки</h3>
    </div>
</div>
</li>
<li class="process-item">
    <div class="process-inner"> 
        <div class="process-info">
            <i class="process-image"></i>
            <h3 class="process-title">Разработка проекта</h3>
        </div>
    </div>
</li>
<li class="process-item">
    <div class="process-inner">
       <div class="process-info">
           <i class="process-image"></i>
           <h3 class="process-title">Согласование проекта</h3>
       </div>
   </div>
</li>
<li class="process-item">
    <div class="process-inner"> 
     <div class="process-info">
        <i class="process-image"></i>
        <h3 class="process-title">Получение разрешения на строительство</h3>
    </div>
</div>
</li>
<li class="process-item">
    <div class="process-inner">
      <div class="process-info">
        <i class="process-image"></i>

        <h3 class="process-title">Строительство мойки</h3>
        </div>
</div>
</li>
<li class="process-item">
    <div class="process-inner">
       <div class="process-info">
        <i class="process-image"></i>
        <h3 class="process-title">Монтаж оборудования</h3>
    </div>

</div>
</li>
<li class="process-item">
    <div class="process-inner">
      <div class="process-info">
        <i class="process-image"></i>
        <h3 class="process-title">Ввод в эксплуатацию</h3>
    </div>
</div>
</li>
</ul>

CSS

body {
    background: #45688e;
}
.process {
    position: relative;
    margin: 60px auto 0;
    padding: 0;
    list-style: none;
    font-size: 0;
    max-width: 1100px;
}
.process-item {
    position: relative;
    display: inline-block;
    width: 25%;
    margin-bottom: 120px;
    vertical-align: top;
    font-size: 1rem;
}
.process-item:nth-child(4n):before,
.process-item:nth-child(5n):before {
    content:"";
    position: absolute;
    border-left: 2px solid #fff;
}
.process-item:nth-child(4n):before {
    top: 55px;
    right: 0;
    bottom: -40px;
}
.process-item:nth-child(5n):before {
    left: 0;
    top: -80px;
    bottom: calc(100% - 55px);
}
.process-item:nth-child(5n):after {
    content: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 3,8 18,-8 0,16 z\" fill=\"rgba(255, 255, 255, 1)\"/></svg>");
    position: absolute;
    left: 200%;
    top: -87px;
    margin-left: -7px;
}
.process-item:last-child:before,
.process-item:last-child .process-inner:after{
    display: none;
}
.process-item:nth-child(-n+4):after {
    content:"";
    position: absolute;
    border-top: 2px solid #fff;
    left: 0;
    right: 0;
    margin-top: 40px;
}
.process-item:nth-child(4n+2),
.process-item:nth-child(4n+3) {
    text-align: center;
}
.process-item:nth-child(4n) {
    text-align: right;
}
.process-inner {
    position: relative;
    min-width: 116px;
    padding: 0 20px;
}
.process-item:first-child .process-inner {
    padding-right: 0;
}
.process-item:nth-child(4n) .process-inner {
    padding-left: 0;
}

.process-inner:before, .process-inner:after {
    content:"";
    position: absolute;
    border-top: 2px solid #fff;
    top: 55px;
}
.process-item:nth-child(4n+1) .process-inner:after {
    left: 154px;
    right: 0;
}
.process-item:nth-child(4n+2) .process-inner:after,
.process-item:nth-child(4n+3) .process-inner:after {
    left: calc(50% + 57px);
    right: 0;
}
.process-item:nth-child(4n+2)...