Mike_Ro
@Mike_Ro
$ run войтивайти

Как правильно сверстать такой блок?

Приветствую!

Как правильно сверстать блок со скрина, чтобы:
1. Круг выше блока ровно на 50% своей высоты.
2. Круг в виде div, которому задано изображение в виде background-image.

Спасибо!

5b644d3e7a704413368891.jpeg
  • Вопрос задан
  • 121 просмотр
Решения вопроса 2
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
Вариант в лоб: https://codepen.io/anon/pen/VBdKZN

Круг в виде div, которому задано изображение в виде background-image.
Если никакого контента внутри не будет, а задача его исключительно графическая, то лучше сделать это псевдоэлементом.
Ответ написан
Mike_Ro
@Mike_Ro Автор вопроса
$ run войтивайти
Реализовать получилось примерно так: https://codepen.io/MikeRo/pen/GBGjdj
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
lamer350
@lamer350
กำลังสูงสุด
margin-top: -[половина высоты круга]px
Чтобы изображение на фоне приняло форуму круга:
border-radius: [половина высоты круга]px
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы