CSS。锐利渐变的5种颜色

Question

我对此有点挣扎。我试图创建一个包含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%);

<强>更新

要更改方向，只需指定起始边缘：

• 左上角
• 顶
• 右上角
• 右
• 右下角
• 底
• 左下角
• 左

或以度为单位传递角度： 例如：45deg，68deg，......