Как сверстать такоя?
Без js, только css.
https://prnt[dot]sc/tuhp95
https://forms[dot]gle/M3M9JdYEPv9AspZG7
Требования к результату:
- нужна возможность крутить схему, надписи должны оставаться горизонтальными;
- должен тянутся на 80% от вьюпорта;
- нужна возможность масштабировать весь блок изменяя один параметр;
- без использования js
1. tors - 05 Декабря, 2020 - 13:36:31 - перейти к сообщению
2. Vladimir Kheifets - 08 Декабря, 2020 - 16:04:21 - перейти к сообщению
tors пишет:
Как сверстать такоя?
Без js, только css.
https://prnt[dot]sc/tuhp95
https://forms[dot]gle/M3M9JdYEPv9AspZG7
Требования к результату:
- нужна возможность крутить схему, надписи должны оставаться горизонтальными;
- должен тянутся на 80% от вьюпорта;
- нужна возможность масштабировать весь блок изменяя один параметр;
- без использования js
Без js, только css.
https://prnt[dot]sc/tuhp95
https://forms[dot]gle/M3M9JdYEPv9AspZG7
Требования к результату:
- нужна возможность крутить схему, надписи должны оставаться горизонтальными;
- должен тянутся на 80% от вьюпорта;
- нужна возможность масштабировать весь блок изменяя один параметр;
- без использования js
Добрый день!
Такое только на CSS не сделать.
Во-первых, потому, что очень трудоемко "рисовать" на чистом СSS.
Например, как можно сделать одну деталь этой схемы, которая состоит из трёх сегметов окружностей. (без background)
Спойлер (Отобразить)
детали, но точно их спозиционировать будет не легко.
Во-вторых, если эти мучения завершатся успешно, то возникнет проблема с кручением схемы.
Есть возможоность анимировать схему на CSS, но если она будет крутиться постоянно,
её никто не прочтёт. Значит необходимо ставить обработчик событий,
например, по клику по одному из сегментов или по наведению на него курсора.
Можно попытаться применить псевдо-классы target или focus, но наврядли это даст желаемый результат.
Удачи!