歪斜的背景图像

Question

嘿，所有的CSS3的知名者， 我有一个小背景图像的问题，我需要得到像这样的结果image。但我遇到了像这里的背景http://bagrattam.com/stackoverflow/bg-skew/bg.html的问题。

如果您在这个问题上帮助我，我将非常感激。

HTML：

<header> 
     <div class="container"> 
      <h6>Production</h6> 
      <h1>This is the heading</h1> 
      <h5>This is the subheading</h5> 
     </div> 

     <div class="angleLayer"> 
      <div class="blogProfile"> 
       <figure class="imgFrame"> 
        <img src="" width="66" height="66" alt=""> 
       </figure> 
       <div class="profileInfo"> 
        <div class="name">Name Surname</div> 
        <time class="date" datetime="2015-04-28">April 08, 2005</time> 
       </div> 
      </div> 
     </div> 
    </header> 

CSS：

header { 
     background-image: url("http://bagrattam.com/website/images/other/paint.png"); 
     background-repeat: no-repeat; 
     background-size: cover; 
     text-align: center; 
     position: relative; 
    } 
    header:after { 
     background: inherit; 
     backface-visibility: hidden; 
     transform: skewY(-12deg); 
     transform-origin: 100% 50% 0; 
     content: " "; 
     display: block; 
     height: 100%; 
     position: absolute; 
     left: 0; 
     bottom: 0; 
     right: 0; 
     z-index: -1; 
    } 
    .angleLayer { 
     transform: skewY(-12deg); 
     transform-origin: 100% 0 0; 
     -webkit-backface-visibility: hidden; 
     z-index: 2; 
     position: relative; 
    } 
    .blogProfile { 
     transform: skewY(12deg); 
     -webkit-backface-visibility: hidden; 
     position: absolute; 
     top: -33px; 
     left: 0; 
     right: 0; 
    } 

Answer 1

尝试使用clip-path财产

 header { 
     background: url("http://bagrattam.com/website/images/other/paint.png") no-repeat; 
     background-size: cover; 
     text-align: center; 
     height: 351px; 
     position: relative; 
    } 
    header:after { 
     -webkit-clip-path: polygon(0% 100%, 100% 100%, 101% 62%); 
     clip-path: polygon(0% 100%, 100% 100%, 101% 62%); 
     background: #fff; 
     content: " "; 
     display: block; 
     height: 100%; 
     position: absolute; 
     left: 0; 
     bottom: 0; 
     right: 0; 
    } 

https://jsfiddle.net/riju2142/p58c6ybv/

好运