css - CSS3 slanted div with background image, with image behind the whole thing

Question

It's hard to put into words what I am trying to accomplish, so check out this picture for a sample:

As you can see, I am looking to create a slanted div with a pattern background (easy), but the other part, the part that the slant is half-covering up, also must have a background image. I've thought of a lot of different ideas and tried using background-clip, background-origin, before and after divs and CSS triangles, the works. Is there any way to do this in pure CSS? I like to not have to combine the images into one or do any photoshopping here.

Answer 1

You need to use skew transforms. One div for the top part, another one for the bottom one, skew them, and then unskew a :before pseudo for each on which you actually apply the backgrounds.

demo

HTML:

<div class='wrap'>
  <div class='s'></div>
  <div class='s'></div>
</div>

Relevant CSS:

.wrap { width: 4em; height: 28em; }
.s {
  overflow: hidden;
  height: 50%;
  transform: skewY(-30deg);
}
.s:before {
  display: block;
  height: 100%;
  transform: skewY(30deg);
  content: '';
}
.s:first-child:before {
  margin: 2em /* width*sin(abs(skew_angle)) = 4em*sin(30deg) */ 0 0;
  background: url(image.jpg) 50% 50%;
}
.s:last-child:before {
  margin: -2em /* -width*sin(abs(skew_angle)) */ 0 0;
  /* pattern background */
}