title: V-shaped sections of page with image background
body: <p>I'm trying to make a one-page website. But I would like something to diversify it from all other similar sites. I came up with the idea of making a v-shaped sections. 
  <img src="https://i.stack.imgur.com/MaPgy.jpg" alt="vshaped page"></p>
  
  <p>I want each section ended with a kind of "v". I do not know how to achieve this effect in css so that there was no need cutting an image that is the background. I have not found any example on the Internet. Here are my attempts:
  HTML:</p>
  
  <pre><code>&lt;div class="wrap" style="z-index: 9999"&gt;
      &lt;img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" /&gt;
   &lt;/div&gt;
   &lt;div class="wrap" style="margin-top: -40px"&gt;
        &lt;img src="http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg" /&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.wrap {
    position: relative;
    overflow: hidden;
    width: 70%;
    height:150px;
    margin: 0 auto;
    background-color:#fff;
  }
  .wrap img {
     width: 100%;
     height: auto;
     display: block;
   }
   .wrap:before, .wrap:after {
      content:'';
      position: absolute;
      bottom: 0;
      width: 50%;
      background-color: inherit;
      padding-bottom:3%;
    }
   .wrap:before {
      right: 50%;
      -ms-transform-origin: 100% 100%;
      -webkit-transform-origin: 100% 100%;
      transform-origin: 100% 100%;
      -ms-transform: skewX(45deg);
      -webkit-transform: skewX(45deg);
       transform: skewX(87deg);
      }
     .wrap:after {
        left: 50%;
        -ms-transform-origin: 0 100%;
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
        -ms-transform: skewX(-45deg);
        -webkit-transform: skewX(-45deg);
         transform: skewX(-87deg);
       }
  </code></pre>
  
  <p><a href="http://codepen.io/anon/pen/azNWPE" rel="nofollow noreferrer">http://codepen.io/anon/pen/azNWPE</a></p>