Css. Резкий градиент 5 цветов

Question

Я немного борюсь с этим. Im пытается создать градиент, содержащий 5 разных цветов с острыми краями. Нет смешивания. До сих пор мне удалось сделать 2. Bur, как сделать 5? кто может помочь в этом?

спасибо!

CSS:

background-image: linear-gradient(
    -45deg, 
    rgba(white, 0.4) 25%, 
    transparent  25%, 
    transparent  50%, 
    rgba(white, 0.4) 50%, 
    rgba(white, 0.4) 75%, 
    transparent  75%, 
    transparent 
); 

Answer 1

Является ли это то, что вы хотите?

background: -webkit-linear-gradient(top,white 0%, white 20%, red 20%, red 40%, orange 40%, orange 60%, blue 60%, blue 80%, black 80%, black 100%); 

Update

Для изменения направления, просто указать начальный край:

• верхний левый
• топ
• верхний правый
• право
• нижний правый
• дно
• нижний левый
• покинул

или передать его угол в градусах: например: 45deg, 68deg, ...