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

Question

[Владислав Чернушевич]

Есть вот такой блок
https://yadi.sk/i/sCCVORp8coMKY
Как сделать градиент в треугольнике, который внизу, если учесть, что ширина блока может быть разной?

Answer 1

[Владимир Новицкий]

Ни в SVG, ни с помощью границ, не получится сделать динамический по ширине треугольник.
Можно только с помощью PNG. Если сделать его надлежащего качества, то непропорциональный ресайз будет не особо заметен. По крайней мере, в Chrome все нормально: codepen.io/Novitsky/pen/ZYYBmm?editors=110

Comments

[Владислав Чернушевич]

уже сделал так Но все равно спасибо)

[Владимир Новицкий]

Uladzislau: на здоровье. )

[Владимир Новицкий]

Можно еще попытаться с помощью Canvas, как-то сделать, но тут надо думать.

Answer 2

[Rad1calDreamer]

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

Comments

[Владислав Чернушевич]

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