Как сверстать такое

[yaparoff]

Здравствуйте, коллеги
Стоит такая задача:
Нужно сверстать это http://skrinshoter.ru/s/021118/W9m2mQjv
При этом при клике на разные части, они будут закрашиваются в разные цвета
Например кликаешь на колесо один раз - оно желтое
второй раз - оно красное
третий раз - оно опять белое
Кликаешь на ось - оно закрашивается в другой цвет

Как это сделать? Прежде всего интересует как сверстать это. А над js-ом потом буду думать

[Switch74]

можно банально картинкой
если через верстку:
колеса можно сделать обычными прямоугольниками со скругленными углами, а оси из нескольких элементов состыковать
аналогичные клики делались совсем не давно https://codepen.io/AlexZaw/pen/ReBjPo

[ows.nightwolf]

Мое мнение - если не надо поддерживать ie8 то лучший вариант использовать inline svg (тот который прямо в разметку в тег svg вставляется). Это даст возможность рисовать объекты произвольной формы, и одновременно с этим работать с ними в отдельности как с самостоятельными DOM элементами (заливку менять, например).