Как сделать общий градиент для двух блоков?

Question

[leeroyjenkins176]

Как применить градиент к треугольнику (вместо красного цвета), чтобы он продолжал родительский?
Точка calc(100% - 70px) указана там для демо. На деле градиент распределяется равномерно внутри блока с динамической шириной.

Comments

[Ivan Ustûžanin]

хоть и поздно и не на чистом CSS (используется кастомный HTML-элемент), но добавлю, вдруг ищущим пригодится:

Answer 1

[Сергей delphinpro]

Например так



Для любого угла градиента

Comments

[leeroyjenkins176]

Как-то можно добиться такого же поведения для градиентов с первым параметром в виде угла поворота?

[Aleksey Solovyev]

leeroyjenkins176, так вы разобрались как эффект то получился этот, чтобы потом могли его повторить? Или просто скопировали?
У Вас врядли получится сделать бесшовным такой эффект при "угле поворота", но можете попробовать подобрать значения:

.el {
  background-image: linear-gradient(135deg, green calc(100% - 50px), blue);
}
.el::after {
  background-image: linear-gradient(95deg, green calc(100% - 74px), blue);
}

[Сергей delphinpro]

Aleksey Solovyev, Подбирать не вариант...

leeroyjenkins176, Обновил ответ

[Aleksey Solovyev]

Сергей delphinpro, интересное решение, но у вас все равно не получится универсального - придется подбирать значения. Например меняем угол на 10deg или -10deg:

ps а если задать основе 10deg, а для стрелки 8.5deg, то уже лучше станет =)

[Сергей delphinpro]

Aleksey Solovyev, да, верно. нужно смещать градиент по горизонтали. но смещение считать через тригонометрические функции в зависимости от угла градиента. Задачка интересная, попробую позже.