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

Question

[Amon Amonov]

Здравствуйте, как сверстать этот блок адаптивно

Comments

[Сергей delphinpro]

Любым способом располагаем шесть элементов. Можно абсолютом, можно как предложил Максим Ленский, можно еще что-то придумать. Не суть.
У каждого элемента будет псевдоэлемент с фоновой изогнутой линией. Он абсолютно позиционирован и трансформирован под нужным углом.

В центре, опять любым способом помещаем круг. Тут не должно быть вопросов и сложностей.

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

Повторяем эти шаги до ситуации, когда схема вообще не будет иметь возможности поместиться во вьюпорт. Здесь все сбрасываем, и тупо в столбик располагаем все шесть элементов (псевдоэлементы с линиями прячем или еще что-то с ними придумываем). Кружок размещаем наверху, и превращаем его в прямоугольник.

Всё. Адаптивная схемка, которую можно прочесть на любом экране.

Answer 1

[Максим]

три блока друг под другом и в каждом блоке два элемента внутри каждого иконка и текст но разные отступы и каждый блок flex justify-content:space-bwtween, главный блок имеет относительное позиционирование и форма круга абсолютно отцентрированная

Иконки сделать в SVG

Comments

[Amon Amonov]

Можешь пример сделать , пожалуйста, здесь

[Максим]

Amon Amonov, https://codepen.io/topicstarter/pen/EdLKqP я раньше делал это уже - дату смотри

Answer 2

[coderxx]

держи https://codepen.io/anon/pen/MLrwMv

Comments

[Сергей delphinpro]

в каком месте у вас "адаптивно"?

[coderxx]

Сергей delphinpro, не дочитал вопрос, бывает:))