Страницы

Поиск по вопросам

четверг, 10 января 2019 г.

График на CSS. Возможно ли?

Добрый день! Подскажите, пожалуйста, возможно ли выполнить такой график на css?


Ответ

Если все же на CSS
*{ box-sizing: border-box; } .graph { position: relative; width: 200px; height: 400px; } .circle { position: relative; width: 200px; height: 400px; overflow: hidden; } .box { position: absolute; transform-origin: 50% 50%; } .item { height: inherit; border: 20px solid; } .count-list { list-style-type: none; padding: 0; margin: 0; } .count-list li { position: absolute; top: 0; right: -20px; font-family: sans-serif; } .count-list li:nth-of-type(1){ top: 0; color: gold; } .count-list li:nth-of-type(2){ top: 30px; color: orangered; } .count-list li:nth-of-type(3){ top: 60px; color: darkturquoise; } /* ------ 1 ------- */ .b-1 { top: 0; left: 0; width: 400px; height: 400px; transform: rotate(0deg); } .b-1 .item { width: 200px; border-color: gold; border-right: none; border-bottom-left-radius: 200px; border-top-left-radius: 200px; } /* ------ 2 ------- */ .b-2 { top: 30px; left: 30px; width: 340px; height: 340px; transform: rotate(30deg); } .b-2 .item { width: 170px; border-color: orangered; border-right: none; border-bottom-left-radius: 170px; border-top-left-radius: 170px; } /* ------ 3 ------- */ .b-3 { top: 60px; left: 60px; width: 280px; height: 280px; transform: rotate(60deg); } .b-3 .item { width: 140px; border-color: darkturquoise; border-right: none; border-bottom-left-radius: 140px; border-top-left-radius: 140px; }

  • 1
  • 2
  • 3

Но уже лучше тогда использовать для такого препроцессоры. Мой код на CODEPEN
А еще лучше не мудрить, а рисовать все это svg.

Комментариев нет:

Отправить комментарий