Hintergrundbild Shaping

Question

Ich versuche, Website mit nicht-rechteckigen Hintergründen zu machen. Hier ist ein Bild, wie es aussehen sollte: https://scontent-frt3-1.xx.fbcdn.net/v/t34.0-12/13046124_10208507344992928_1508021114_n.jpg?oh=4da1595b35d18dd641146a5ff5f39ff9&oe=57206A50

Ich habe so viele Ratschläge aus dem Web versucht, aber nichts hat für mich funktioniert. Könnte mir bitte jemand dabei helfen? Danke!

Answer 1

Sie könnten transform:skewY verwenden, um ein solches Design zu erstellen. Eine kurze Demo kann unten gesehen werden, wo die background Eigenschaft hat mit einigem geschickten Einsatz entlang von background-position verwendet worden „zwei Hälften“ des Bildes zu positionieren zusammen:

div{ 
 
    width:100%; 
 
    height:300px; 
 
    position:relative; 
 
    margin-top:50px; 
 
    } 
 
.part1:before,.part1:after{ 
 
    content:""; 
 
    position:absolute; 
 
    background:url("http://www.godhungry.org/wp-content/uploads/2015/08/6794440-free-street-wallpaper.jpg"); 
 
    background-size:200% 100%; 
 
    background-position:0 0; 
 
    height:100%; 
 
    width:50%;top:0;left:0; 
 
    transform:skewY(5deg); 
 
    transform-origin:top left; 
 
    } 
 
.part1:after{ 
 
    left:50%; 
 
    transform:skewY(-5deg); 
 
    transform-origin:top right; 
 
    background-position:-100% 0; 
 
    } 
 
.part2{ 
 
    background:url("http://www.godhungry.org/wp-content/uploads/2015/08/6794440-free-street-wallpaper.jpg"); 
 
    background-size:100% 100%; 
 
    transform: perspective(2000px) rotateY(-30deg); 
 
transform-origin:top right; 
 
    }

<div class="part1"></div> 
 

 
<div class="part2"></div>