jquery - 如何使用背景图像创建倾斜/倾斜 div 的级联

Question

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

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

背景颜色代表背景图像。

我的方法是创建一个通用 div，其中子 div 作为图像所在 div 的父级并旋转它们(通用 div 的每个父 div 子级)。在 -11deg 和 11deg 之间随机旋转及其图像 div 上的相应负旋转以对抗其父旋转。我遇到的主要问题是我为此目的使用了绝对位置，我失去了将我的图像包装在其父 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 工作量的巨大浪费。

一些更好的选择:

1. 使用 SVG 图形。绘制任意形状并不是 HTML/CSS 真正擅长的。您的浏览器具有以 SVG 形式绘制点图形的强大功能。您应该利用它——这种效果对于在 SVG 中绘制是微不足道的。唯一需要注意的是浏览器支持；如果您需要支持 IE8 及更早版本，请注意它们没有 SVG。但除此之外，它可能是最佳选择。

2. 使用 CSS 三 Angular 形(即边框 hack)为您的 div 框创建倾斜的边缘。对于所有互锁框，这可能很难用 CSS 三 Angular 形完美实现，但它可以做到，并且浏览器支持直接回到 IE6。