Как с помощью ТОЛЬКО css/html нарисовать усеченный конус?

Question

[yv1995]

В общем нужен конечный вот-такой рисунок! (БЕЗ ИСПОЛЬЗОВАНИЯ КАРТИНОК)
top-sale.pro/wp-content/uploads/2016/01/Voronka.net.jpg
По большей степени меня интересует как сделать то что обведено joxi.ru/vAWLo90TDdNyrW
Да и все должно быть по дивам, т.к. потом нужно будет обрабатывать события по клику на каждую область!
Может кто натолкнет на правильную мысль сижу второй день получился бред))
Спасибо)

Answer 1

[Ivan Bogachev]

Неплохой идеей будет Snap.svg - рисуйте что хотите, клик на элемент сделать несложно.

Answer 2

[dom1n1k]

Это нужно рисовать либо при помощи svg, либо растровая картинка + карта кликов. Предпочтительнее, конечно, первый вариант.
Пытаться обойтись тут чистыми html/css - это чистой воды "в гамаке и стоя". Нет ни одной разумной причины так делать.

Comments

[yv1995]

Вот вот я прекрасно понимаю ,что это очень нелегко будет реализовать... но чувак, который дал мне тестовое задание видимо уверен, что так можно)

[dom1n1k]

А, ну если это тестовое задание, то они просто хотят посмотреть, как кандидат выкрутится. В реальности это использоваться не будет.
Чисто форму сделать можно - тут уже есть ответы об этом. А вот если и градиент тоже нужен... тогда не знаю. Это какие-то совсем уж лютые извращения выходят.

Answer 3

[Алексей Николаев]

Нарисовать можно. Идея такая: рисуете трапецию при помощи border, через псевдоэлементы добавляете к ней овал. Следующий уровень будет перекрывать ее и наслаиваться, создавая разделения между секциями. Последний уровень - просто овал.

Comments

[yv1995]

Именно так и делал! И делал разделение между блоками с помощью белого бордюра, но получился бред!

Answer 4

[trushka]

Можно с помощью 3D-трансформаций: типа квадратный блок, снизу - перпендикулярный ему блок со скруглёнными углами (круглый). Всё это наклонено слегка назад.. Вернее, чтоб проще с бордерами было, то лучше назад на угол φ, а круглые блоки у основания - на угол 90°+2*φ