V-shaped sections of page with image background

Question

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.

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:

<div class="wrap" style="z-index: 9999">
    <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
 </div>
 <div class="wrap" style="margin-top: -40px">
      <img src="http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg" />
 </div>

CSS:

.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);
     }

http://codepen.io/anon/pen/azNWPE

Answer 1

try something like this (I have used background color instead of images)

remembar to use z-index higher from top to down

.orange {     
    position:relative;
    background-color:#e15915;
    height:320px !important;
    width:300px !important;
    z-index:2;

}

.orange:after {
    content:'';
    position: absolute;
    top: 100%;
    left: 16%;
    margin-left: -50px;
    width: 0;
    height: 0;
    border-top: solid 50px #e15915;
    border-left: solid 150px transparent;
    border-right: solid 150px transparent;
}

.blue {     
    position:relative;
    background-color:#234561;
    height:320px !important;
    width:300px !important;


}

.blue:after {
    content:'';
    position: absolute;
    top: 100%;
    left: 16%;
    margin-left: -50px;
    width: 0;
    height: 0;
    border-top: solid 50px #234561;
    border-left: solid 150px transparent;
    border-right: solid 150px transparent;
}

<div class="orange"></div>
<div class="blue"></div>

Answer 2

I was able to achieve the effect using css polygons.

 -webkit-clip-path: polygon(50% 17%, 100% 0, 100% 84%, 50% 100%, 0 84%, 0 0);
 clip-path: polygon(50% 17%, 100% 0, 100% 84%, 50% 100%, 0 84%, 0 0);

Demo: http://codepen.io/anon/pen/ogxGyd

Answer 3

You could do this easily using svg clipPath.

This will work on all browsers but IE8.

<svg width="300" height="520" viewBox="0 0 300 520">
  <defs>
    <clipPath id="top">
      <path d="M0,0 L300,0 L300,160 L150,200 L0,160z" />
    </clipPath>
    <clipPath id="middle">
      <path d="M0,160 L150,200 L300,160 L300,320 L150,360 L0,320z" />
    </clipPath>
    <clipPath id="bottom">
      <path d="M0,320 L150,360 L300,320 L300,520 L0,520z" />
    </clipPath>
  </defs>
  <image clip-path="url(#top)" xlink:href="http://dummyimage.com/300x200/0e3000/fff" x="0" y="0" height="200px" width="300px" />
  <image clip-path="url(#middle)" xlink:href="http://dummyimage.com/300x200/004445/fff" x="0" y="160" height="200px" width="300px" />
  <image clip-path="url(#bottom)" xlink:href="http://dummyimage.com/300x200/45000a/fff" x="0" y="320" height="200px" width="300px" />
</svg>