Дорожная карта из 9 элементов, связанных одной линией

#css3 #html5

Доброго времени суток! Необходимо разместить 9 элементов, и сделать "цепочку", соединённую
синей линией. Вот как на макете:


Много чего сделал, а именно на этом моменте остановился уже больше чем на пол дня.
Вот СSS: 

.diamond {
    text-align: center;
    width: 60px;
    height: 60px;
    background: #07aad8;        
    transform: rotate(45deg);    
    border-radius: 10px;
    overflow: hidden; }

.diamond >img {
    max-width: 100%;
    transform: rotate(-45deg);}


В html каждый из девяти элементов имеет такую структуру:

  

    

      
    
                  
    
Консультация технической возможности вашего проекта
  


Пишу на BS4, соответственно адаптивность этой карте тоже нужна.
    

Ответы

Ответ 1

1) Вариант на html css с иконками



* {
  margin: 0;
  padding: 0;
}

.over-wrapper {
  overflow: hidde;
  border: 1px solid red;
  width: 460px;
  height: 450px;
  margin: 30px auto;
}

.wrapper {
  width: 1424px;
  height: 1400px;
  background: #fff;
  margin: 0 auto;
  transform: scale(.33)translate(-1470px, -1450px);
  text-align: center;
  position: relative;
}

.item {
  width: 300px;
  height: 300px;
  display: inline-block;
  background: #07AAD8;
  transform: rotate(45deg);
  margin: 140px;
  zoom: .8;
  vertical-align: top;
  text-align: center;
  position: relative;
  z-index: 100;
}

.item p {
  zoom: 4;
  transform: rotate(-45deg);
}

hr.line1 {
  position: absolute;
  top: 230px;
  zoom: 1;
  width: 1400px;
  margin-left: -30px;
}

hr.line2 {
  position: absolute;
  top: 700px;
  zoom: 1;
  width: 1370px;
}

hr.line3 {
  position: absolute;
  top: 1160px;
  zoom: 1;
  width: 1400px;
}

hr {
  border-color: #07AAD8;
}

.item:nth-child(4):before {
  content: "";
  display: block;
  border-radius: 50%;
  width: 580px;
  height: 590px;
  position: absolute;
  border: 4px solid #07AAD8;
  left: 200px;
  top: -75px;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
}

.item:nth-child(5):before {
  content: "";
  display: block;
  border-radius: 50%;
  width: 580px;
  height: 580px;
  position: absolute;
  border: 4px solid #07AAD8;
  left: -110px;
  top: 240px;
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
}

.item i.fa {
  display: block;
  zoom: 8;
  transform: rotate(-45deg);
  margin: 10px;
  color: #fff;
}

p.text {
  font-size: 12px;
  font-weight: 100;
  width: 130px;
  position: absolute;
  top: 100%;
  left: 20px;
}



  

    

    

    

      
      
Lorem ipsum dolor sit amet consectetur.
    
    

      
Lorem ipsum dolor sit amet consectetur.
    
    

    

    

      
    
    

    

    

    

      
    
    

      
      
Lorem ipsum dolor sit amet consectetur.
    
  



Ответ 2

2) Вариант 2 svg с иконками