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

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

Ответ

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

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