Сначала верстаете сами круги как обычно в потоке, позиционируете их, например, с помощью flexbox(
https://habr.com/ru/post/467049/). Дальше каждую стрелку делаете отдельным блоком и позиционируете с помощью absolute(
htmlbook.ru/css/position), вырвав из потока. Ну и размещаете как нужно, только при уменьшении окна браузера надо следить, чтобы они не поломались(
https://itchief.ru/lessons/html-and-css/css-media-...).
Вообще терпеть не могу подобные задачи