背景画像整形

Question

私は非長方形の背景を持つウェブサイトを作ろうとしています。私は、Webから非常に多くのアドバイスを試してみましたが、何も私のために働いていないhttps://scontent-frt3-1.xx.fbcdn.net/v/t34.0-12/13046124_10208507344992928_1508021114_n.jpg?oh=4da1595b35d18dd641146a5ff5f39ff9&oe=57206A50

：ここでのように、それがどのように見えるべきかの画像です。 誰も助けてくれませんか？ ありがとう！

Answer 1

あなたは、このようなデザインを作成するためにtransform:skewYを使用することができます。 backgroundプロパティが一緒に画像の「二つの半分」を配置するbackground-positionのいくつかの巧妙な使用と一緒に使用されてきたところ迅速なデモは、以下に見られることができます。

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>