Как верстаются такие линии?

#html #css #svg

Можно наложить background-ом и потом абсолютное позиционирование, либо есть другой,
быстрый и правильный метод?


    

Ответы

Ответ 1

Если вам нужно получить полностью адаптивный график, который работает во всех браузерах,
включая IE,  то конечно нужно использовать SVG.   

Идеальный вариант, когда дизайнер даёт исходные данные в векторном формате, но если
это растровая картинка, то можно воспользоваться следующей техникой:   


Загружаем растровую картинку в векторный редактор с помощью
нескольких строчек svg.  Это нужно, чтобы точно позиционировать
положение векторных элементов относительно растрового фона.   






Нам необходимо получить формулу path которая точно повторяет форму
кривой на растровом изображении.  Для этого в векторном редакторе с
помощью инструмента - "рисовать кривые Безье" добавляем узловые точки
вдоль кривой и двигая рычагами узловых точек, добиваемся точного совпадения нашего
path с кривой на растровой картинке.    
Сохраняем файл и копируем из него формулу path кривой.     
Далее создаем заготовки баннеров  и помещаем их в секцию
 для  дальнейшего многократного использования   
Вызываем баннер из хранилища и позиционируем его относительно кривой:


  


Размещаем текст в баннере


Ноябрь 2017 

.Такая техника может быть освоена  начинающими изучение SVG.
Она немного трудоемка, но дает неоспоримые преимущества перед CSS      


Кривые в CSS offset-path поддерживает только экспериментальная технология Chrome
В svg кривые поддерживают все современный браузеры плюсIE. 
Если будет необходимость, то легко заменить одну форму баннера на другую. 
Можно менять форму кривой, без нарушения верстки. 
Приложение полностью адаптивно и верстка никогда не сломается при изменении размера
дисплея гаджета.







Ответ 2

CSS свойство offset-path - путь кривой, по которой располагаются элементы (SVG-формат),
offset-distance - расстояние от начала кривой в процентах.
Если нужно блоки выровнять горизонтально - в руки Вам геометрия, JS и transform-rotate )))


body {
  background-color: #333;
  padding: 0 4em;
  width: 100%;
}

svg, .box {
  position: absolute;
}

.box {
  height: 50px;
  width: 50px;
  offset-path: path("M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812
C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502
450.023437,1.28465307 450.023437,1.28465307");
}

.one {
    background-color: red;
    offset-distance:15%;
}

.two {
    background-color: green;
    offset-distance:50%;
}

.three {
    background-color: blue;
    offset-distance:78%;
}







Ответ 3

CSS - он в изначально "заквадраченный", рисует прямые линии и прямоугольники. Можно
скругляться углы и получать из бордеров изогнутые линии - но в этом именно случае извращаться
не стоит.



.timeline {
  position: relative;
  margin: 20px;
  background-color: #172238;
}
.timeline__back {
  display: block;
  width: 100%;
  height: auto;
}
.timeline__info {
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline__item {
  position: absolute;
  width: 180px;
  padding: 15px;
  margin-top: -35px;
  color: #fff;
  text-align: center;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 20px;
  background-color: #1e2b4b;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
}
.timeline__item:before,
.timeline__item:after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
}
.timeline__item:before {
  height: 30px;
  width: 1px;
  background-color: #52789c;
}
.timeline__item:after {
  height: 7px;
  width: 7px;
  margin: 30px 0 0 -4px;
  background-color: #172238;
  border: 1px solid #52789c;
  border-radius: 50%;
}
.timeline__item strong {
  display: block;
}
.timeline__item--01 {
  top: 49%;
  left: 50%;
}
.timeline__item--02 {
  top: 33%;
  left: 80%;
}
.timeline__item--03 {
  top: 75%;
  left: 24%;
}

  
  

    

      Январь 2017Lorem ipsum dolor sit amet consectetur
    
    

      Январь 2017Lorem ipsum dolor sit amet consectetur, adipisicing
elit magnam, numquam
    
    

      Январь 2017Lorem ipsum dolor sit amet consectetur
    
  





Сделайте так:

0) Делаем div-враппер, позишн = релатив, фон - синий. 

1) В него кладем именно картинкой (не фоном) кривую линию - в .svg (дисплей = блок,
ширина = 100%, высота = авто) Почему не фоном? потому что картинка будет распирать
враппер по ширине и задавать высоту, будет удобно "резиниться".

2) Также добавляете во враппер список ul (позишн = статик) и в него - уже li (позишн
= абсолют) с текстами. У каждого li будет два класса - первый, пусть .timeline__item
(ширина, рамка, фон, цвет текста - один для всех li), и второй, который у всех разный
- отвечает за положение каждого во враппере .timeline__item--01 (left: 22.7%; top:
45%;). Позицию в процентах, если резинить нужно.

Не нужно тексты пихать в картинку svg - они могут быть проигнорированы поисковиками!

Что в итоге?


Картинка в фоне задает размер для враппера, в ней кривая линия, несвойственная для css.
В коде - четкий список с данными в виде списка, seo - одобряэ )
На экране - всё расставлено как нужно. Кружочек делаем через .timeline__item:before,
вертикальную черту от блока к нему - .timeline__item:after


Проверить резиновость на https://codepen.io/Valiev/pen/LmmjgL