Div Backgrounds That Overlap At The Corner - html

Question

There are several separate background images, displayed top to bottom. Is it possible to make them overlap slightly and clip a transparent triangular area in the bottom-right corner revealing the image below?
Is this possible with CSS?
Here is the desired look:

Answer 1

Yes, this is very possible with CSS.
Here is a technique using a rotated div and :before pseudo element. This looks like a long explanation, but the basic principal is pretty straight forward once you start poking around.
Compatibility: IE9 + and all modern browsers — The transform property in IE9 requires the -ms- prefix and Safari requires the -webkit- prefix. They should be placed before the unprefixed property.
The wrapper
The wrapper is used to clip the slanted corners of each div.
Provide a suitable max and min width
Clip its children with overflow: hidden
The div
The div is used to create the slant by clipping its childrens bottom right corner.
Rotate with transform: rotate()
Clip its children with overflow: hidden
Blow the width out with width: 200% so that the corners are clipped by the wrapper
Move every div (except the first div) up with a negative margin
Change the z-order with z-index so that each div is overlapped by the div before it
The :before pseudo element
The :before provides the actual background image without any extra markup.
Counter the div parents rotation by the same number of degrees
Provide the background image
Shift as needed with transform-origin
The straight edge is provided by the bottom edge of the image and the corner is cut off by the parent. The image must be quite large to overlap the width of its parent.
Full Example
Example with prefixes.
.wrap {
margin: 0 auto;
max-width: 1000px;
min-width: 660px;
overflow: hidden;
background: #EEE;
}
.wrap > div {
transform: rotate(-15deg);
height: 700px;
width: 200%;
overflow: hidden;
transform-origin: 0 90%;
position: relative;
z-index: 10;
}
.wrap > div:before {
content: '';
display: block;
width: 100%;
height: 100%;
background: url(http://lorempixel.com/output/food-q-c-1500-1000-2.jpg) no-repeat;
transform: rotate(15deg);
position: absolute;
transform-origin: 30% 0;
}
.wrap > div:nth-child(n+2) {
margin-top: -140px;
}
.wrap > div:nth-child(2):before {
background-image: url(http://lorempixel.com/output/people-q-c-1500-1000-10.jpg);
}
.wrap > div:nth-child(3):before {
background-image: url(http://lorempixel.com/output/technics-q-c-1500-1000-3.jpg);
}
.wrap > div:nth-child(2) {
z-index: 9;
}
.wrap > div:nth-child(3) {
z-index: 8;
}
<div class="wrap">
<div></div>
<div></div>
<div></div>
</div>