HTML – 响应对齐倾斜的Div

使用 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>

jsfiddle

解决方法

如果您对内容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;
}