如何使用 background-image 创建倾斜/倾斜 div 的级联
how to create a cascade of Slanted / Skewed divs with background-image
我愿意创建这样的特定内容:
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>
从您发布的图片中,我可以看出虽然您想要倾斜的边缘,但框内的实际文本不应倾斜。
鉴于此标准,我认为您需要停止考虑将 CSS 转换作为实现它的方法。即使你可以让它工作,所有正向和反向旋转对浏览器来说也是一种巨大的浪费CPU。
一些更好的选择:
使用 SVG 图形。绘制任意形状并不是 HTML/CSS 真正擅长的。您的浏览器具有以 SVG 形式绘制点图形的强大功能。您应该利用它——这种效果对于在 SVG 中绘制是微不足道的。唯一需要注意的是浏览器支持;如果您需要支持 IE8 及更早版本,请注意它们没有 SVG。但除此之外,这可能是最好的选择。
使用 CSS 三角形(即边框黑客)创建 div 框的倾斜边缘。对于所有互锁框,要用 CSS 三角形完美地实现这一点可能非常棘手,但可以做到,并且浏览器支持直接回到 IE6。
我愿意创建这样的特定内容:
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>
从您发布的图片中,我可以看出虽然您想要倾斜的边缘,但框内的实际文本不应倾斜。
鉴于此标准,我认为您需要停止考虑将 CSS 转换作为实现它的方法。即使你可以让它工作,所有正向和反向旋转对浏览器来说也是一种巨大的浪费CPU。
一些更好的选择:
使用 SVG 图形。绘制任意形状并不是 HTML/CSS 真正擅长的。您的浏览器具有以 SVG 形式绘制点图形的强大功能。您应该利用它——这种效果对于在 SVG 中绘制是微不足道的。唯一需要注意的是浏览器支持;如果您需要支持 IE8 及更早版本,请注意它们没有 SVG。但除此之外,这可能是最好的选择。
使用 CSS 三角形(即边框黑客)创建 div 框的倾斜边缘。对于所有互锁框,要用 CSS 三角形完美地实现这一点可能非常棘手,但可以做到,并且浏览器支持直接回到 IE6。