Question

我正试图制作一个单页网站。但我希望能从所有其他类似网站中将其多样化。我提出了制作V形截面的想法。 vshaped page

我希望每个部分以＆＃34; v＆＃34;结尾。我不知道如何在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轻松完成此操作。

This will work on all browsers but IE8

＆＃13;

<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>

＆＃13;

Answer 2

尝试这样的事情（我使用的是背景颜色而不是图像）

记住从上到下使用z-index更高

.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 3

我能够使用css多边形实现效果。

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

演示： http://codepen.io/anon/pen/ogxGyd

页的V形部分有图象背景

3 个答案: