Как сверстать радиусы внутри блока?

Question

[Beleg042]

Добрый день! Только учусь верстке, не смог найти ответа в сети. Как нарисовать окружности внутри блока, спозиционировать их как на скриншоте и поставить поверх них кнопки и блоки с текстом? Благодарю.

Answer 1

[Ankhena]

Это просто фон.
Фон с помощью множественных радиальных градиентов.
У одного блока, а не трех.
Типа того https://jsfiddle.net/ertscfdw/
Разными способами написала градиент для разных случаев, сами сделаете как нужно, в зависимости от желаемого поведения при адаптации.
Статья

Answer 2

[Дима Паутов]

https://jsfiddle.net/dcLhk2pn/

Дальше сами.
А так, какая-то дичь. Просто заюзайте фон. Почему многих людей ставит в ступор подобная вещь. Использование фона как картинки не делает вас плохим, это нормальная практика. Либо вы потратите много времени на эту дичь, либо вы просто заюзаете картинку. Ведь их ещё наверняка придётся адаптировать.

Смысл в этом есть лишь 1 на мой взгляд. Когда эти круги нужно анимировать, тогда да. А просто так, пустая трата времени

Answer 3

[Леонид Роженцев]

Дима Турков, согласен. Лучше нарисовать фон в svg и вставить как картинку.