Как сделать границу с 3 цветами, как изображение, загруженное ниже?

Question

Я хочу сделать границу, как изображение ниже с линейным градиентом. Я сделал это с 2 цветами, написав;

border-image: linear-gradient(orange 50%, blue 50%) 1 100%; 

Но когда я пытаюсь использовать его с 3-мя цветами, он не работает;

border-image: linear-gradient(orange 0%, blue 33%, red 99%) 1 100%; 

Как я могу это сделать?

JSFIDDLE

Answer 1

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

border-image: linear-gradient(orange 33%, blue 33%, blue 66%, red 66%) 1 100%; 

Обратите внимание, что «оранжевый 0%» и «красный 100%» являются автоматическими в этом случае.