Как корректно сверстать подобное?
Например, вот так
https://codepen.io/hisbvdis/pen/MWgvZRrsnippet
У общего блока добавляем: background-image: url(<картинка с точками, можно как data url>);
background-position: top left; 
background-repeat: repeat-y; 
padding-left: <размер фона по Y + отступ до контента>;
Для каждого из элементов добавляем:position: relative; 
&:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0 - <размер отступа>;
  transform: translate(50%, 50%);
  border: <размер белого пространства сверху / снизу> solid #fff;
  <и здесь либо рисуем элемент через width, height, background-color, border-radius либо картинками, думаю что второе предпочтительнее> 
}
Правда такой способ в зависимости от высоты элементов может дать частично закрытые точки, для того чтобы этого избежать надо будет контролировать высоту элементов с тем чтобы она была кратна шагу между точками.