Как реализовать такой ховер эффект и правильно организовать верстку?

Question

[Alice777]

https://jsfiddle.net/saqt3az5/

Меню должно выглядеть так:

И при ховере получается такой интересный эффект. Но столкнулся с проблемой в верстке. Помогите решить это пожалуйста.

Контент весь должен быть именно в треугольнике, чтобы четко шла анимация при ховере.
И, нужно оставить именно треугольник, ибо на мобильной версии эффект похожий - вот такой:

Comments

[Alice777]

Вот более точная идея

Answer 1

[ilanagrk]

.header-triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 125px 125px 0 0;
transition: .6s ease;
border-color: #43A682 transparent transparent transparent;
position: absolute;
z-index: -1;
}