Как сделать адаптивные треугольные кнопки?

Question

[latipov_no_1]

Добрый день!
Имеется картинка background c 5-ти угольной картинкой.
Код

.main {
    height: 500px;
    background: linear-gradient(#ffffff, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)) , url(./img/main.png) no-repeat top center;
    background-size: cover;}

в нижней части должны находится кнопки, как на картинке.

и изменять background при наведении как на фото
Сделал с помощью css треугольные кнопки, все норм но они не адаптивные.
Сделал через z-index все адаптивное, но main закрывает кнопки, делая его не доступными для клика.
Может кто сталкивался с таким, как можно реализовать адаптивные треугольные кнопки?
Спасибо.

Ссылка на https://jsfiddle.net/DraMS/zsmx8t87/37/

Answer 1

[Ankhena]

https://webref.ru/css/pointer-events
Или выложите код на jsfiddle.net

Comments

[latipov_no_1]

https://jsfiddle.net/DraMS/zsmx8t87/37/

[Ankhena]

latipov_no_1: я не поняла, где у вас нормальная адаптивность, в примере все блоки разъезжаются.

Вот смотрите, картинка и треугольники.
https://jsfiddle.net/Lcd6m500/
Дальшеможете менять картинку на svg, градиенты для гладкости, теоретически, тоже, менять высоту треугольников на проценты, выравнивать текст и т.д.

[latipov_no_1]

Ankhena W: Спасибо большое. У меня была имитация на адаптивность. Приятного Вам дня!

Answer 2

[Николай]

z-index задай блоку с кнопками, перекрывающий z-index треугольника.