Текст по радиусу окружности CSS

[ziliboba0213]

В общем ковырял тут, надо было сделать типа новогоднюю рулетку с подарком, но не суть, вроде доковырял, но не очень понял саму математику процесса с этими процентами и позиционированием:
https://jsfiddle.net/vtnru48k

Ладно углы я понял, там просто - 360/16. А все остальное для адаптива тупо пришлось пропорциями вычислять, а смысл так и не понял. Как оно математически работает то? И да, чет я отстал от жизни, мне высоту элемента только через js можно что ли? А то пришлось через медиа тупо высоту/ширину задавать

Может кому интересно потрещать будет по этому поводу

[Diversant]

Сообщение от ziliboba0213

Может кому интересно потрещать будет по этому поводу

привет, а в чем проблема?

[ziliboba0213]

Сообщение от Diversant

привет, а в чем проблема?

Да проблема в том, что я не могу понять, как работают эти пропорции... Логику в смысле. Почему, вот как пример, именно так должно быть у внутреннего элемента:

PHP код:

        right: -63.89%;
    bottom: 41.66%;
    width: 100%;
    height: 8.33%;
    overflow: hidden;
    padding-left: 13.89%; 


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

Просто эти проценты я уже сам высчитал, до этого были чистые пиксели

[Diversant]

Сообщение от ziliboba0213

Да проблема в том, что я не могу понять, как работают эти пропорции... Логику в смысле. Почему, вот как пример, именно так должно быть у внутреннего элемента:

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

[ziliboba0213]

С каких хренов right right: -63.89%; например

[ziliboba0213]

Сообщение от Diversant

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

Нене, я как раз подогнал ко всем разрешениям То есть я меняю .circle_fortune только, а внутренние в процентах сами меняются под них Просто я не могу понять логики

[Diversant]

Тогда логику в чем? ты не можешь понять?

[ziliboba0213]

Ну смотри, круг 600 пикселей. Центр его 300 же, то есть 50%. А в реальности right: -63.89%; и bottom: 41.66%;

Дочерний width: 100%; с padding-left: 13.89% - 113,89%.

Я просто понять не могу, откуда такие проценты берутся

А, всё, right: -63.89% это 50% + padding-left. А почему bottom такой тогда? Запутался

[Diversant]

Сообщение от ziliboba0213

А, всё,

я примерно также с верстальщиками разговариваю

[ziliboba0213]

Сообщение от Diversant

я примерно также с верстальщиками разговариваю

Так у меня с bottom чет не сходится теперь