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

Question

[anton_trofimov95]

Как сверстать таким образом с сохранением адаптива и чтобы кружочки всегда были на линии подскажите плиз.

Comments

[Александр]

Вам код скинуть или подсказать что делать нужно?

[kamisarlapsha]

Если вам помог мой ответ, то отметьте решением)

Answer 1

[alex-1917]

А свой код ГДЕ?
Какие попытки были?
Какой картинкой спросили - такой картинкой и делайте - аккуратнее просто обрежьте там лишнее и вперёд, выкладываю готовый код!

<img src="kortinko.jpg" alt="ya-kortinko" style="width:100%;height:auto">

Comments

[anton_trofimov95]

https://codepen.io/anton-trofimov/pen/MdzYqj мой вот был

Answer 2

[kamisarlapsha]

https://jsfiddle.net/djKliter/k3w4xbfs/
При изменении ширины container блоки ломаться не будут

Answer 3

[ma4t]

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

.block {
  width: 400px;
  height: 200px;
  margin-top: 50px;
  margin-left: 100px;
  position: relative;
  border: 1px solid green;
}

.circle, circle2 {
  position: absolute;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid red
}

.circle {
  left: -25px;
  top: -47px;
}

.circle2 {
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
}

<div class='block'>
  <div class='circle'>
  </div>
  <div class='circle2'>
  </div>
</div>

обернете еще это все в блок и
на адаптиве уменьшие круги , да зададите паддинги по бокам

полосы делаются идущими друг за другом div, у которых по бокам тоже padding: 0 60px к примеру и пишется определенные border (border-top/border-left и тд)

текст можно обернуть одной div и родителю у которого заданы border Нужные
написать dislplay: flex; align-items:center ( равнять по вертикали) и justify-content: flex-end к краю правому чтоб

Comments

[alex-1917]

ему готовый код надоть!!!
)))

[anton_trofimov95]

alex-1917, ошибаетесь) спасибо

Answer 4

[toha_man]

Довольно легко. По кругляшам хорошо ответил автор выше - абсолютное позиционирование.
А с полосами еще проще - взгляните на них как на границе блоков. у четных слева нето бордера(border-left: none)
у нечетных(используйте псевдо класс :nth-child(odd и even)) - справа.

Осталось только убрать границы у первого(:first-child) и последного(:last-child) блоков - border: none
И получается адаптив

Answer 5

[elepner]

Пользуйтесь https://stackblitz.com/edit/typescript-u6jwzh