Wie linearen Gradienten von CSS verwenden Winkel wie Design erstellen

Question

ich einen Entwurf so will meine <div>

Aber nicht diese Struktur zu bekommen.

Mein CSS-Code ist:

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

Jede Art von Hilfe würde geschätzt.

Answer 1

2 Gradienten erstellen, eine mit einem Schritt für den Diagonalteil und ein weiteres mit einem transparenten Teil für den horizontalen Teil

.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

Sie jede Art von Gradienten von unterhalb der Verbindung erzeugen können http://www.colorzilla.com/gradient-editor/