Geek Answers Handbook

V-shaped sections of the page with the image background

I am trying to create a one page website. But I would like to diversify it from all other similar sites. I came up with the idea of ​​creating V-shaped sections. vshaped page

I want each section to end with a kind of "v". I do not know how to achieve this effect in css so that there is no need to crop the image, which is the background. I have not found a single 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

+4
html css css-shapes
source share
3 answers

You can do this easily using svg clipPath .

This will work on all browsers except 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>
+4
source share

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

remembar use z-index above top to bottom

 .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>
0
source share

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

0
source share

More articles:


All Articles