tors пишет:Как сверстать такоя?
Без js, только css.
https://prnt[dot]sc/tuhp95
https://forms[dot]gle/M3M9JdYEPv9AspZG7
Требования к результату:
- нужна возможность крутить схему, надписи должны оставаться горизонтальными;
- должен тянутся на 80% от вьюпорта;
- нужна возможность масштабировать весь блок изменяя один параметр;
- без использования js
Добрый день!
Такое только на CSS не сделать.
Во-первых, потому, что очень трудоемко "рисовать" на чистом СSS.
Например, как можно сделать одну деталь этой схемы, которая состоит из трёх сегметов окружностей. (без background) Спойлер (Отобразить)CODE ( html):
скопировать код в буфер обмена
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css example</title> <style> .r1{ border-radius:50%; border-right:2px solid #FF0000; display:inline-block; width:32px; height:32px; } .r2{ border-left:2px solid #FF0000; border-radius:50%; margin-left:8px; display:inline-block; width:32px; height:32px; } .r3{ border-left:2px solid #FF0000; border-right:2px solid #FF0000; border-bottom:2px solid #FF0000; border-radius:50%; width:32px; height:32px; margin-left:22px; margin-top:-5px; } .r1_2_c,.r3_c{height:30px; overflow:hidden} .r3_c{margin-top:-4px;} .r1_2_3_c{ width:100px; height:100px; transform: rotate(45deg); } </style> </head> <body> <div class="r1_2_3_c"> <div class="r1_2_c"> <div class="r1"></div> <div class="r2"></div> </div> <div class="r3_c"> <div class="r3"> </div> </div> </body> </html>
Можно было бы применить псевдо-элементы ::before, ::after, слои ,топы, лефты маргины, чтобы собрать все
детали, но точно их спозиционировать будет не легко.
Во-вторых, если эти мучения завершатся успешно, то возникнет проблема с кручением схемы.
Есть возможоность анимировать схему на CSS, но если она будет крутиться постоянно,
её никто не прочтёт. Значит необходимо ставить обработчик событий,
например, по клику по одному из сегментов или по наведению на него курсора.
Можно попытаться применить псевдо-классы target или focus, но наврядли это даст желаемый результат.
Удачи!
|