Можно ли такое сверстать с помощью CSS и может JS?
Может быть какой-нибудь piechart на максималках?) 
Это не труъ. Настоящие верстальщики делают такие штуки на чистом CSS. А если лениво или времени нет - вставляют в страницу большой картинкой. На самом деле в верстке может быть смысл, если нужна адаптивность - не всегда, но часто ее может быть проще сверстать, чем на лету подгружать разные картинки в зависимости от изменяющегося размера экрана.
Набросал вам примерчик, думаю раскрасить его градиентами вы уже сами сможете:snippet
Теоретически - все возможно.По времени - долго