Question

我愿意创造这样的具体内容：

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

背景颜色代表背景图像。

我的方法是创建一个普通div，其子div作为图像所在的div的父母并旋转它们（每个父div的子节点）。随机旋转-11deg到11deg之间图像div上的相应负旋转以抵消其父旋转。我遇到的主要问题是我为此目的使用绝对位置，我失去了将我的图像包装在其父div中的能力。

我正在使用jquery在正或负度上旋转每个奇数和偶数div，并在图像上反转它的旋转。

我需要知道是否有办法实现这个设计，如果有的话，请看看tunel末尾的灯光，因为我已经坚持了好几天......

谢谢大家：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。

如何使用背景图像创建一系列倾斜/倾斜的div

1 个答案: