Как правильно сделать liner-gradient?

Question

[ololoshka1]

Вот как я сделал https://codepen.io/vintalis/pen/YzygEeY , а нужно что б по диагонали, только половина была градиент, остальное фоновый цвет.Вот

пример

того как должно быть

Comments

[kunjut19]

использование clip-path?

[ololoshka1]

kunjut19,вообще не вариант, он не кросбраузерный совсем.

Answer 1

[Степан Крапивин]

Используй transform: skew()

Comments

[ololoshka1]

действительно, гениально просто)

Answer 2

[hzzzzl]

развернуть второй спан через transform: skew

Comments

[ololoshka1]

спасибо)