Как корректно сверстать подобное?

Question

[eugenedrvnk]

В вёрстке встречается подобный момент :

image

Возникают сомнения касаемо того, как правильнее будет выстраивать боковые рамки из точек.
Если говорить про рамки, которые идут сплошным цветом, то там в принципе вопросов не возникает, в случае же с точками, я вижу 2 способа. Либо через border-image, либо же просто каждый элемент верстать флексом, и в него, в начало, вставлять изображение с точками.
Есть ли ещё какие - то чуть более удобные способы для подобных конструкций?

Comments

[Rustam Bainazarov]

Блок с повторяющимся по оси Y фоном.

Можно на absolute со значением высоты — calc(100% - <высота большой точки + отступ>).

Можете и без него, тогда на flex'e с двумя колонками. В колонке, где точки — тоже flex.

Блоки большой точки и полоски с точками — псевдоэлементы, если не нужно на них вешать действия по клику.

Пример круглых точек на градиенте:


Почему градиент, а не border?
Градиент более равномерно (одинаково) рендерится в разных браузерах и ОС, чем border + гораздо больше контроля (размер, расстояние).

[posters]

Есть такая вещь, TimeLine называется. Погуглите. У вас не она, но очень похоже

Answer 1

[Рома Зварич]

Например, вот так

https://codepen.io/hisbvdis/pen/MWgvZRr

Answer 2

[Flying]

У общего блока добавляем:

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 либо картинками, думаю что второе предпочтительнее> 
}

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

Answer 3

[strelok011]

я бы предложил сделать иначе.
Можно точку повесить на ::before

li {
    display: inline-block;
    position: relative;
}
li::before {
    display: inline-block;
    border: 9px double white;
    width: 8px;
    height: 8px;
    background: black;
    border-radius: 40px;
    content: "";
    top: 0;
    left: 0;
}}

а пунктир - на ::after

li::after{
    display: inline-block;
    border: 1px dotted black;
    width: 0px;
    height: calc(100% - 20px);
    content: "";
    bottom: 0;
    left: 0;
}}

Что-то в этом роде.