Как сверстать HTML таблицу из 3D-кирпичей?

Question

[maashaa]

Верстаю диаграмму про сервисно-ориентированную архитектуру:



Но хочется-то такую:



Подскажите, пожалуйста, как. Может, можно как-то применить box-shadow из CSS3? Или может кто-нибудь видел и подскажет ссылку, где уже успешно свёрстано, а я дальше разберусь и скопирую.

Comments

[mythmaker]

элементы должны быть кликабельны?

[maashaa]

нет, не обязательно

Answer 1

[homm]

Немного обидно, что левый ответ, предлагающий отказаться от затеи получает +4, а после верного (моего, ага) ответа автор еще и сомневается «Если не CSS». Ну ладо, чё. Придется разжевать и в рот положить: pastie.org/1135685

Answer 2

[Дмитрий]

Не могу избавиться от мысли, что возможно имеет смысл всю диаграмму сделать картинкой. Размер получится небольшим, а сделать проще на порядок.

Comments

[maashaa]

Хочется рисовать диаграммы на описательном языке.

Например, часто требуется перевести надписи, или уточнить какой-нибудь кирпич под конкретного заказчика. Иногда может возникнгуть желание модифицировать картнку.

Да и Powerpoint — проприетарный продукт, хочется пользоваться им поменьше. Если не CSS, то может есть какая-нибудь удобная Javascript библиотека для рисования таких диаграмм?

Answer 3

[homm]

Можно использовать css3-свойство transform: skew. При этом придется использовать либо по 3 элемента, либо задействовать псевдо-элементы before и after. Так-же придется как-то побороть проблему накладывания нижних элементы на верхние. Например, сделать всем элементам position: relative и уменьшать z-index от верхних к нижним.

Answer 4

[beatlejute]

Может svg/vml там вроде бы extrusion есть.

Answer 5

[homm]

Выглядити так:

Comments

[homm]

Я хотел написать комментарий к ответу, промахнулся.

Answer 6

[ryuzaki_spb]

Вы чуть выше интересовались JS-библиотеками для рисования диаграмм.
Нашёл два топика, в которых описывается довольно приличное количество подобных библиотек. Надеюсь, что среди них Вы сможете найти подходящую.
habrahabr.ru/blogs/javascript/80027/
habrahabr.ru/blogs/javascript/79960/