V形页面的图像背景部分 [英] V-shaped sections of page with image background

问题描述

我正在尝试制作一个单页网站。但我希望从其他所有类似网站多样化。我想出了制作V形部分的想法。

我希望每个部分以一种v结尾。我不知道如何在CSS中实现这种效果，因此不需要剪切背景图像。我还没有在互联网上找到任何例子。以下是我的尝试：
HTML：

 < div class =wrapstyle =z-index： 9999\" > 
< img src =https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg/> 
< / div> 
< div class =wrapstyle =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; 
宽度：70％; 
 height：150px; 
 margin：0 auto; 
 background-color：#fff; 
} 
 .wrap img {
 width：100％; 
 height：auto; 
 display：block; 
} 
 .wrap：before，.wrap：after {
 content：''; 
位置：绝对; 
 bottom：0; 
宽度：50％; 
 background-color：inherit; 
 padding-bottom：3％; 
} 
 .wrap：之前{
右：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：在{
 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

解决方案

<使用 svg clipPath 。

这适用于所有浏览器，但IE8 。

 < svg width =300height =520viewBox =0 0 300 520> < DEFS> < clipPath id =top> <路径d =M0,0 L300,0 L300,160 L150,200 L0,160z/> < / clipPath> < clipPath id =middle> <路径d =M0,160 L150,200 L300,160 L300,320 L150,360 L0,320z/> < / clipPath> < clipPath id =bottom> <路径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/fffx =0y =0height =200pxwidth = 300px/> < image clip-path =url（#middle）xlink：href =http://dummyimage.com/300x200/004445/fffx =0y =160height =200pxwidth = 300px/> < image clip-path =url（#bottom）xlink：href =http://dummyimage.com/300x200/45000a/fffx =0y =320height =200pxwidth = 300px/>< / svg>  

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

解决方案

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>

这篇关于V形页面的图像背景部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！