Как сделать адаптивное приложение без медиа запросов по макету дизайнера?

#html #css #svg #svg_animation #inkscape

Подскажите пожалуйста, как  лучше сверстать в данном случае, соты?
Я верстал подобное, но там были одинаковые бордеры (Приложил код).
В данном же случае, все куда труднее и у меня нет особо идей как это лучше сделать.
И второй вопрос, как грамотно спозиционировать эти блоки, чтобы потом не сильно костылить
медиа запросами?  





.benefits__wrapper {
  text-align: center;
  padding-top: 3.9881vw;
  padding-bottom: 15px; }

.benefits__heading {
  margin-bottom: 6.84524vw; }

.benefits__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  @media screen and (max-width: 759px) {
    .benefits__items {
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; } }

@media screen and (max-width: 759px) {
  .benefits__item {
    width: 40%;
    margin: 20px 0; } }

@media screen and (max-width: 459px) {
  .benefits__item {
    width: 100%; } }

.item {
  text-align: center;
  margin-right: 40px; }
  @media screen and (max-width: 459px) {
    .item {
      margin-right: 0; } }
  .item:last-child {
    margin-right: 0; }
  .item__title {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font: 1.25rem/1 "PFEncoreSansPro-Regular";
    color: #868686;
    margin-bottom: 34px; }
  .item__info {
    font: 0.9375rem/1.125rem "PFEncoreSansPro-Thin";
    color: #adadad;
    margin-bottom: 3.03571vw; }

.hexagon {
  margin: 0 auto 54px; }
  .hexagon__icon {
    fill: #fff;
    -webkit-transition: background-color .35s;
    transition: background-color .35s; }

.hexagon,
.hexagon__item_inner {
  position: relative;
  width: 91px;
  height: 52px;
  background-color: #fe8682;
  -webkit-transition: background-color .35s;
  transition: background-color .35s; }

.hexagon:before,
.hexagon:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fe8682;
  -webkit-transition: background-color .35s;
  transition: background-color .35s; }

.hexagon:before,
.hexagon__item_inner:before {
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg); }

.hexagon:after,
.hexagon__item_inner:after {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg); }

.hexagon__item_inner {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  background-color: #fc635e;
  z-index: 1; }

.hexagon__item_inner:before,
.hexagon__item_inner:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: background-color .35s;
  transition: background-color .35s;
  background-color: #fc635e; }

.hexagon__content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 1; }

.hexagon:hover,
.hexagon:hover:before,
.hexagon:hover:after {
  background-color: #fc635e; }

.hexagon:hover .hexagon__item_inner,
.hexagon:hover .hexagon__item_inner:before,
.hexagon:hover .hexagon__item_inner:after {
  background-color: #fff; }

.hexagon:hover .hexagon__icon {
  fill: #fc635e; }

      

        

          

            
What can
              
you receive?
            
            

              Daisy is sagittis sem nibh id elit.   Duis sed odio sit amet nibh vulputate
cursus a 
                sit amet mauris. Morbi accumsan ipsum
            
          
        
        

          

            

              

              

                
              
            
            
Clents
            

              This is Photoshop's version  of Lorem Ipsum.   Proin gravida nibh vel
velit auctor aliquet. Aenean
          
          

            

              

              

                
              
            
            
branding
            

              This is Photoshop's version  of Lorem Ipsum.   Proin gravida nibh vel
velit auctor aliquet. Aenean
          
          

            

              

              

                
              
            
            
marketing
            

              This is Photoshop's version  of Lorem Ipsum.   Proin gravida nibh vel
velit auctor aliquet. Aenean
          
          

            

              

              

                
              
            
            
adv.
            

              This is Photoshop's version  of Lorem Ipsum.   Proin gravida nibh vel
velit auctor aliquet. Aenean
          
        



    

Ответы

Ответ 1

SVG решение

У SVG решения есть ряд преимуществ:  


Кроссбраузерность, -   работает во всех современных браузерах плюс IE11, Edge
Полная адаптивность, - ваша вёрстка никогда не сломается при любом размере дисплея  


Пошаговая инструкция: 


Для получения точной привязки контуров фигур к фоновой картинке
загружаем картинку в векторный редактор и присваиваем значения  svg в
соответствии с габаритными размерами картинки.

width="1330" height="880" viewBox="0 0 1330 880"




	 





В векторном редакторе с помощью инструмента - Рисовать кривые Безье
и прямые отрезки 

наносим узловые точки по контурам красной линии и шестиугольников    


   


Сохраняем файл svg, забираем из него path общей
линии и  шестиугольников.    
Добавляем в каждый шестиугольник текст, который  позиционируем
координатами X,Y`        

 STEP
 1       

Добавляем картинку в шестиугольник с помощью pattern 



      
      


Добавляем красные кружки с галочкой, вместо них можно добавить иконки, как на
эскизе



   
    ✔
    

Ниже полный пример кода, добавил анимацию общей линии 



 .h1{
 fill-opacity:0.6;
  } 
 
  .h2 {
 fill-opacity:0.9;
  }
 .txt1 {
  font-size:32px;
  fill:#595959;
  text-decoration: underline;
   font-weight:500;
   } 
  .txt2 {
  font-size:20px;
  fill:#444444;
   font-weight:500;
   } 
 tspan {
 fill:#FC635E;
 font-weight:500;
 font-size:36px;
  } 
	 




CSS решение этого учебного топика можно найти по ссылке, которую указал @UModeL


Ответ 2

Анимация процесса выполнения проекта

Сценарий анимации  


Анимация красной линии происходит на протяжении  выполнения всего проекта     
Последовательно появляется текст внутри каждого шестиугольника, раскрывая суть этапа
По мере завершения определенного этапа загорается красная иконка с чекбоксом.   


Реализовать такой сценарий не трудно, так как все анимации будут следовать друг за
другом и лишь одна анимация рисования общей линии длится в течение всей анимации.
Эта анимация реализована на изменении атрибута stroke-dashoffset от максимального
значения длины  линии 1975px до нуля.    

Остальные анимации появления текста, иконок основаны на изменении прозрачности.   

Ниже полный код. Анимация начинается после клика на кнопку - Start   



.h1 {
 fill-opacity:0.6;
 
 } 
 
  .h2 {
 fill-opacity:0.9;
 
 }
 .txt1 {
  font-size:32px;
  fill:#595959;
  text-decoration: underline;
   font-weight:500;
   fill-opacity:0.2;
   } 
  .txt2 {
  font-size:20px;
  fill:#444444;
   font-weight:500;
    fill-opacity:0.2;
   } 
 tspan {
 fill:#FC635E;
 font-weight:500;
 font-size:36px;
 fill-opacity:1;
  }