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

Question

[Михаил Р.]

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

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

Спасибо!

Answer 1

[Алексей Уколов]

Вариант в лоб: https://codepen.io/anon/pen/VBdKZN

Круг в виде div, которому задано изображение в виде background-image.

Если никакого контента внутри не будет, а задача его исключительно графическая, то лучше сделать это псевдоэлементом.

Answer 2

[Михаил Р.]

Реализовать получилось примерно так: https://codepen.io/MikeRo/pen/GBGjdj

Answer 3

[lamer350]

margin-top: -[половина высоты круга]px
Чтобы изображение на фоне приняло форуму круга:
border-radius: [половина высоты круга]px

Comments

[overveg]

border-radius: [половина высоты круга]px
Можно просто border-radius: 50%

[Алексей Уколов]

При margin-top под блоком окажется пустое пространство равное этому самому марджину. Судя по скетчу в вопросе, такое не подойдёт.

[Михаил Р.]

Алексей Уколов, именно!

[lamer350]

Алексей Уколов, не окажется! Виктория Шумская, border-radius: 50% не кросбраузерно!

[Алексей Уколов]

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

[overveg]

точно, "Android Browser 2.3 does not support % value for border-radius." https://caniuse.com/#search=border-radius
0,3% юзеров еще пользуются:(
https://www.statista.com/statistics/271774/share-o...
Спасибо!

[lamer350]

Виктория Шумская, На самом деле там есть еще глюк в работе с overflow:hidden! Не знаю просто сколько у вас опыта, для меня "деда" пару лет назад % в border-radius это были настоящие проблемы) Потому до сих пор использую px, и вот буквально пару месяцев назад тестил, то были проблемы еще в сафари и хроме на моб устройствах.