Как адаптивно верстать круг выходящий за границы контейнера?

Question

[godsplane]

Мне просто интересно это правильно верстать, потому что мое решение мне не сильно нравится.
Сам элемент.


Мое решение:
https://codepen.io/poylar/pen/GRMpOMr
Мне не нраится в моем решениии фиксированная высота и ширина, а так же в мобилке из-за этого ширина в процентах идет выше 100% , потому что в мобилке этот блок должен выходить за боковые рамки.
Прошу совета как сделать лучше.

Comments

[Максим]

Как выглядит макет для мобилки ?

Answer 1

[Алексей Дубровин]

1) Не вижу проблем с фиксированными величинами для кастомных элементов. Несколько медиа запросов.
2) Если принципиально нужно решить в %. Делаем относительно. В внутрь текст абсолютом. Как это работает(Первая загугленая статья)

.round {
      max-width: 827px;
      height:0;
      padding-top:30%;
      width: 100%;
}

Answer 2

[Сергей delphinpro]

Вариантов много. Например, так.
Здесь я применил свойство aspect-ratio, просто чтобы сократить код, и побыстрее написать пример. Вы можете использовать хак с паддингом и дополнительным элементом для круга, если нужна поддержка более старых браузеров.