Как задать треугольнику CSS необходимый градиент?

Question

[sergey]

jsfiddle

есть треугольник сделанный на css, необходимо его перекрасить (вместо gray, поставить градиент). Градиент также имеется, вытянут с avacode.

background-image: linear-gradient(to top, rgb(207, 207, 213) 0%, rgb(135, 129, 129) 50%, rgb(207, 207, 213) 100%);

Как его применить? В чем может быть причина?

Answer 1

[sergey]

Немного повозился, но вышло (прозрачный треугольник - это цвет следующего background):
jsfiddle

<div class="triangle-right"></div>

.triangle-right {
  border-image: none;
  height: 30px;
  width: 150px;
 background-image: linear-gradient(to top, rgb(207, 207, 213) 0%, rgb(135, 129, 129) 50%, rgb(207, 207, 213) 100%);
}

.triangle-right:after{
  content:"";
  display: block;
  height: 0;
  border-left:20px solid black; 
	border-top:15px solid transparent;
  border-bottom:15px solid transparent;
}

Answer 2

[Пётр Попов]

Попробуйте поэкспериментировать с border-image. Вот первый пример из поисковика: https://css-tricks.com/examples/GradientBorder/. Ну и с префиксами обязательно: https://autoprefixer.github.io/ru/

Answer 3

[Вячеслав]

Ваш треугольник сделан border'ами, а вы применяете фон к элементу ( который по факту не виден).

Comments

[sergey]

я его не применяю, просто разместил для информации

Answer 4

[Dead Gothic]

Сам недавно столкнулся с такой задачей.Норм решения не нагуглил.Сделал костылем.Вложил два diva друг в дружку.У оберточного divа сделал фон нужным градиентом,а и з второго сделал треугольник например белого цвета.Получался один треугольник градиентный один белый.