如何使用CSS的线性渐变来创建像设计一样的角度

Question

我想在<div>

上设计这样的设计

但没有得到这种结构。

我的CSS代码是：

background: linear-gradient(to right, #406884 22%,#3b5261 50%, #38464f 80%);

任何形式的帮助都将受到赞赏。

Answer 1

创建2个渐变，一个用于对角线部分的一个步骤，另一个用于水平部分的透明部分

.test {
    width: 100%;
    height: 100px;
    background-image: linear-gradient(to top, black 40%, transparent 40%), 
    linear-gradient(-35deg, black 50%, tomato 50%, tomato 60%, lightgreen 60%, lightgreen 100%);
}

<div class="test"></div>

Answer 2

您可以从下方链接生成任何类型的渐变 http://www.colorzilla.com/gradient-editor/