Как сверстать круг между блоками?

Question

[yischyk]

Comments

[Антон Литвиненко]

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

[yischyk]

Антон Литвиненко, да хоть обычный блок с округлением, важно еще как-то обводку между item сделать

[Вадим]

yischyk, сходу приходят сразу минимум 3 варианта. Слишком абстрактный вопрос.
Это круг или вырез?
У "Круга" свой фон, или прозрачный?
круг есть только у двух подряд идущих item?
Если item останется один, круг должен пропасть?
Может быть 3 items подряд?
и что значит "важно ещё обводку между item сделать". Какую обводку?

Answer 1

[Ольга]

Любому из блоков задать relative
внутрь добавить псевдоэлемент в виде круга,получится что-то типа

.item-1{position:relative;}
.item-1::after{
  content:'';
  width:50px;
  height:50px;
  border-radius:50%;
  position:absolute;
  top:50%;
  left:100%;
  transfrom:translate(-50%, -50%);
  background:red;
}

про css фигуры можно почитать тут https://html5book.ru/css-figury/
про псевдоклассы https://html5book.ru/psevdoklassy/

Comments

[Сергей Т]

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

[Ольга]

Сергей Т, ну, тут не угадаешь, может, их потом 3 будет. Пример все-таки абстрактный, блоки могкт быть на самом деле не 50% по ширине и пр.

[Сергей Т]

Ольга, Согласен, всегда решение зависит от ситуации) решение через контейнер, мне кажется более универсальным, как бы не менялись блоки внутри, кругом независимо от них, можно манипулировать) если конечно же нету условия, чтобы круг зависел, от какого-либо элемента)

[ambisinister One]

yischyk, А почему не два блока, перекрытые кругом посередине?