Kann der Winkel des Farbverlaufs abhängig von der Breite des Containers gemacht werden?

Question

Also habe ich zwei benachbarte flüssige divs, die ihre Breite ändern können, wenn sich die Gerätegröße ändert, wenn der Benutzer die Schriftgröße des Browsers ändert oder wenn der Browser mit Strg + gezoomt wird.

Ich möchte eine Diagonale haben, die beide divs durchkreuzt, so wie hier:

_____
|blah|
|blah|
|blah| 
|   /| <--- Erstes div oder Abschnitt
|__/_|
| /  | <--- Zweites div oder Abschnitt
|/   |
|blah|
|blah|
|blah|
|____| 
<----> flüssige Breite

Ich versuche es mit CSS zu machen, um das Herunterladen von Bildern und zusätzliche HTTP-Anfragen zu vermeiden. Deshalb verwende ich lineare Verläufe. Das Problem ist, dass der Winkel der Diagonalen sich ändern muss, wenn die Breite seines Containers zunimmt oder abnimmt, sonst bricht die Diagonale.

Hier sehen Sie ein Beispiel: http://dabblet.com/gist/50db5e6220b5ba557b9e

Zur Info, der Code des genannten Beispiels ist:

/*
* Diagonale, die beide divs ohne Bruch durchkreuzt
*/
div, p{margin:0;}
div{padding:0 1em;}
.one{
    background: #f06;
    background: linear-gradient(170deg, #f06 80%, yellow 80%, yellow);
    font-size: 200%
}
.two{
    background: yellow;
    background: linear-gradient(170deg, #f06 20%, yellow 20%, yellow);
    font-size: 200%
}

Und das HTML:

Ich habe versucht, das background-size, background-position, background-origin, die Einheiten von em zu px, px zu %, die Farbstops usw. zu ändern. Mir gehen die Ideen aus.

Meine Frage ist... gibt es eine Möglichkeit, den Winkel im Verlauf abhängig von der Breite des Containers zu machen (auf indirekte Weise), so dass sich die Diagonale ändert, wenn sie neu dimensioniert wird? Ich möchte eine reine CSS-Lösung (kein JavaScript).

Wenn dies ein unlösbares Problem ist, ist das auch ok =)

Answer 1

Sie könnten diesen Workaround verwenden:

.wrapper {
    position: relative;
}
.bg {
    z-index: -1;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(to bottom right, #f06 50%, yellow 50%, yellow);
}

Demo

Answer 2

Ich vermute, dass du dies mit background-size und no-repeat machen kannst. DEMO

.one{
    background: #f06;
    background: linear-gradient(to bottom right, #f06 50%, yellow 50%, yellow) right  #f06 ; 
    background-size: 50% 100%;  100% 50% ;
    background-repeat:no-repeat;
    font-size: 200%
}
.two{
    background: yellow;
    background: linear-gradient(to bottom right, #f06 50%, yellow 50%, yellow) left yellow ; 
    background-size: 50% 100%;  100% 50% ;
    background-repeat:no-repeat;
    font-size: 200%
}

Aber es wird seltsam aussehen, wenn beide Divs unterschiedliche Höhen haben: DEMO

Es wäre besser, den Gradienten im übergeordneten Container (body für dein Dabblet) zu setzen meiner Meinung nach, es sei denn, du möchtest den Gradientenwinkel brechen.