Как сверстать такие кнопки?

Question

[Карен Мнацаканян]

Привет всем!
Как мне сверстать такие кнопки, интересует только форма кнопки.

Answer 1

[Ankhena]

Типа того: https://jsfiddle.net/w70L67q6/
Дальше можно играть в угол наклона градиента, радиусы, отступы и т.д. для достижения большей плавности линий.

Answer 2

[Сергей]

Можно прилепить картинку сбоку, а на ней нарисовать карту. Не знаю насколько велосипед, но сработает.

Comments

[Микола Деревло]

тут активные кнопки всплывают, под каждую активную кнопку новую картинку?
как по мне, лутше на canvas нарисовать
или на псевдокласах можно, впринципе before after хватит

[Сергей]

Микола Деревло, либо несколько картинок, либо одну большую, но размеченую. Как душе угодно (сервер будет благодарен, если одну использовать)

Answer 3

[Юрий Истомин]

Подложку делаешь png-картинкой, с помощью z-index и позиционирования накладываешь их друг на друга.