如何使用 background-image 创建倾斜/倾斜 div 的级联

Question

我愿意创建这样的特定内容：

http://i.stack.imgur.com/jdk9B.png

背景颜色代表 background-images。

我的方法是创建一个通用的 div，其中 children divs 充当图像所在的 divs 的 parents去旋转它们（每个parent div child）。在-11deg和11deg之间随机旋转，图像上的相应负旋转div到反其 parent 旋转。我遇到的主要问题是我为此目的使用了绝对位置，我失去了将图像包裹在 parent div 中的能力。

我正在使用 jquery 旋转每个奇数和偶数 div 的正度数和负度数，并用同样的方法来抵消它在图像上的旋转。

我需要知道是否有办法实现这种设计，如果有，请看到隧道尽头的曙光，因为我已经坚持了好几天...

谢谢大家:D

我现在的总体结构是这样的：

$('.rotated-divs').children().each(function () {

 if($(this).parent().children().index(this)%2 == 0){ 
    $(this).css({"transform":"rotate(11deg)"});

    if($(this).parent().children().index(this) > 1){
  $(this).css({"top":"-150px"});//.css({"transform":"rotate(11deg)"})

 }
 }

 else{
   $(this).css({"transform":"rotate(-11deg)","top":"-150px"});
 }
 
});

 $(".img-container:even").css({"transform":"rotate(-11deg)"});
 $(".img-container:odd").css({"transform":"rotate(11deg)"});

.rotated-divs{

 position: absolute;
 width: 100%;
 top: 0;
 left: -100px;
 overflow: hidden;
  
 .div-r{
  width: 250%;
  height: 600px;
  position: relative;
  border: 3px solid yellow;

  .img-container{
   width: 75vw;
   height: 100%;
   background-position: center;
   background-size: cover;
   position: absolute;
   left: 100px;
   
  }
 }
}

<div class="rotated-divs">
  <div class="div-r" >
   <div  class="img-container" style="background-image: url(img/01.jpg);"></div>
  </div>
  <div class="div-r">
   <div  class="img-container" style="background-image: url(img/02.jpg);"></div>
  </div>
  <div class="div-r">
   <div  class="img-container" style="background-image: url(img/03.jpg);"></div>
  </div>
  <div class="div-r">
   <div  class="img-container" style="background-image: url(img/04.jpg);"></div>
  </div>

  
 </div>

Answer 1

从您发布的图片中，我可以看出虽然您想要倾斜的边缘，但框内的实际文本不应倾斜。

鉴于此标准，我认为您需要停止考虑将 CSS 转换作为实现它的方法。即使你可以让它工作，所有正向和反向旋转对浏览器来说也是一种巨大的浪费CPU。

一些更好的选择：

使用 SVG 图形。绘制任意形状并不是 HTML/CSS 真正擅长的。您的浏览器具有以 SVG 形式绘制点图形的强大功能。您应该利用它——这种效果对于在 SVG 中绘制是微不足道的。唯一需要注意的是浏览器支持；如果您需要支持 IE8 及更早版本，请注意它们没有 SVG。但除此之外，这可能是最好的选择。
使用 CSS 三角形（即边框黑客）创建 div 框的倾斜边缘。对于所有互锁框，要用 CSS 三角形完美地实现这一点可能非常棘手，但可以做到，并且浏览器支持直接回到 IE6。

如何使用 background-image 创建倾斜/倾斜 div 的级联

how to create a cascade of Slanted / Skewed divs with background-image

jquery

html

css

background-image

skew