使用
this技术的修改版本,我已经设法为我正在研究的网站制作倾斜的,响应式的div.我遇到的问题是,有3个倾斜的div在彼此的顶部,并且它们意味着在页面下方创建一条对角线(因此每个倾斜的div需要与它周围的那些正确对齐).到目前为止,使用这些div的百分比宽度尚未奏效,但我不确定还有什么可尝试的.
对此的一个好的解决方案是响应和[优选]仅css.
*{
margin: 0;
padding:0;
}
.hero{
width: 100%;
position: relative;
border: 1px solid black;
background-color: green;
}
.slanted{
position: relative;
background-color: purple;
width: 40%;
padding: 3em 0 3em 1em;
}
.slanted:after{
content: '';
background-color: purple;
position: absolute;
top: 0;
bottom: 0;
right: -6em;
width: 20em;
overflow: visible;
z-index: 1;
-webkit-transform: skewX(-13deg);
-moz-transform: skewX(-13deg);
-ms-transform: skewX(-13deg);
-o-transform: skewX(-13deg);
transform: skewX(-13deg);
}
.slanted h2{
position: relative;
z-index:3;
}
.hero1 .slanted{
width: 30%;
}
.hero2 .slanted{
width: 20%;
}
.hero3 .slanted{
width: 10%;
}
<div class="hero hero1">
<div class="slanted">
<h2>Some text</h2>
</div>
</div>
<div class="hero hero2">
<div class="slanted hero-text">
<h2>Some text</h2>
</div>
</div>
<div class="hero hero3">
<div class="slanted hero-text">
<h2>Some text</h2>
</div>
</div>
解决方法
如果您对内容div使用基于JUST百分比的宽度和倾斜的静态宽度,则不能仅使用CSS执行此操作.
想象一下,就是说,你的页面宽度为10,每个斜面的宽度为1.你有3个div,分别为10％,20％和30％,这意味着它们的宽度为1,2,和3分别.添加斜面使其宽度为2,3和4,因此它们排成一行.现在,当我们将容器宽度设为20时,问题出现了,因此在添加斜面之后,div现在是4,6和8,或者5,7和9.他们不再排队,因为div宽度发生了变化,但斜线没有变化.
如果你没有IE8的支持,你可以使用calc(http://caniuse.com/#feat=calc)和min-width的组合来实现你想要的东西.倾斜度为29px,因此如果将div宽度更改为calc(100％-700px),calc(100％-729px)和calc(100％-758px)或任何一组三个像素宽度,只要它们保持29px除了然后设置相距29px的最小宽度,你应该能够实现你想要的东西.
编辑：Codepen示例http://codepen.io/supah_frank/pen/oJcIA
只需更改此CSS
.hero1 .slanted{
width: calc(100% - 900px);
min-width: 358px;
}
.hero2 .slanted{
width: calc(100% - 929px);
min-width: 329px;
}
.hero3 .slanted{
width: calc(100% - 958px);
min-width: 300px;
}
