带有图像背景的页面的 V 形部分

Question

我正在尝试制作一个单页网站。但我想要一些东西来使其与所有其他类似的网站多样化。我想出了制作V形截面的想法。

我希望每个部分都以一种“v”结尾。我不知道如何在 css 中实现这种效果，这样就不需要剪切作为背景的图像。我还没有在互联网上找到任何例子。这是我的尝试：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

您可以使用svg clipPath.

这将适用于除 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>