Skewed Hintergrund CSS nur

Question

Hintergrund auf zwei Teile teilen müssen:

ich habe:

body { 
 
    background: #b6da8c; 
 
    overflow: hidden; 
 
} 
 

 
body:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 50%; 
 
    height: 100%; 
 
    background: #005370; 
 
    -webkit-transform-origin: 100% 0; 
 
    -ms-transform-origin: 100% 0; 
 
    transform-origin: 100% 0; 
 
    -webkit-transform: skewX(-10deg); 
 
    -ms-transform: skewX(-10deg); 
 
    transform: skewX(-10deg); 
 
    z-index: -1; 
 
}

Wie Sie tatsächlich dort ist in 3 sehen kann, wie man es ändern 2 wie auf dem Bild haben?

Answer 1

Wirklich einfache Lösung ohne zu viele Änderungen an Ihrem Code. Drücken Sie einfach das Element vom Bildschirm und vergrößern Sie die Breite.

body { 
background: #b6da8c; 
overflow: hidden; 
} 

body:before { 
    content: ''; 
    position: absolute; 
    top: 0; right: -200px; 
    width: 60%; height: 100%; 
    background: #005370; 
    -webkit-transform-origin: 100% 0; 
    -ms-transform-origin: 100% 0; 
    transform-origin: 100% 0; 
    -webkit-transform: skewX(-10deg); 
    -ms-transform: skewX(-10deg); 
    transform: skewX(-10deg); 
    z-index: -1; 
} 

Answer 2

Sie könnten die transform-origin ändern, um unten zu sein.

body { 
 
    background: #b6da8c; 
 
    overflow: hidden; 
 
} 
 

 
body:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 50%; 
 
    height: 100%; 
 
    background: #005370; 
 
    -webkit-transform-origin: 100% 0; 
 
    -ms-transform-origin: 100% 0; 
 
    transform-origin: 100% 0; 
 
    -webkit-transform: skewX(-10deg); 
 
    -ms-transform: skewX(-10deg); 
 
    transform: skewX(-10deg); 
 
    z-index: -1; 
 
    transform-origin: bottom; 
 
}

Answer 3

einfach der richtige Wert negativ machen, so dass es Überlauf und die Breite größer machen den verborgenen Teil zu kompensieren:

body { 
 
    background: #b6da8c; 
 
    overflow: hidden; 
 
} 
 

 
body:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: -30%; 
 
    width: 70%; 
 
    height: 100%; 
 
    background: #005370; 
 
    -webkit-transform-origin: 100% 0; 
 
    -ms-transform-origin: 100% 0; 
 
    transform-origin: 100% 0; 
 
    -webkit-transform: skewX(-10deg); 
 
    -ms-transform: skewX(-10deg); 
 
    transform: skewX(-10deg); 
 
    z-index: -1; 
 
}

Sie leicht tun können die gleiche Sache mit nur Hintergrund und linearen Gradienten auf den Körper wie dies:

body { 
 
    background: linear-gradient(100deg, #b6da8c 50%, #005370 0%); 
 
    overflow: hidden; 
 
    height:100vh; 
 
}

Answer 4

body { 
 
    background: #b6da8c; 
 
    overflow: hidden; 
 
} 
 

 
body:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    width: 70%; 
 
    height: 100%; 
 
    background: #005370; 
 
    -webkit-transform-origin: 100% 0; 
 
    -ms-transform-origin: 100% 0; 
 
    transform-origin: 100% 0; 
 
    -webkit-transform: skewX(-10deg); 
 
    -ms-transform: skewX(-10deg); 
 
    transform: skewX(-10deg); 
 
    z-index: -1; 
 
}