CSS3倾斜的div与背景图像，与整个事情背后的图像 [英] CSS3 slanted div with background image, with image behind the whole thing

问题描述

这是很难写成我想要完成的，所以看看这张图片的样品：

HTML ：

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

相关 CSS ：

  .wrap {width：4em;身高：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 * / 
} 
  

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.

解决方案

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 */
}

这篇关于CSS3倾斜的div与背景图像，与整个事情背后的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！