响应对齐倾斜Divs

Question

使用this技术的修改版本，我设法为我正在处理的网站制作倾斜的响应式div。我遇到的问题是，有3个倾斜的divs在彼此的顶部，并且它们意味着在页面上创建一条对角线（所以每个倾斜的div需要与其周围的对齐）。对这些div使用百分比宽度目前还没有工作，但我不知道还有什么可以尝试的。

一个很好的解决方案是响应和[最好] css-only。

*{ 
 
    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> \t 
 

 
<div class="hero hero2"> 
 
    <div class="slanted hero-text"> 
 
     <h2>Some text</h2> 
 
    </div> 
 
</div> \t 
 

 
<div class="hero hero3"> 
 
    <div class="slanted hero-text"> 
 
     <h2>Some text</h2> 
 
    </div> 
 
</div> \t

jsfiddle

Answer 1

你是不是要能够只用CSS来做到这一点，如果你正在使用JUST基于百分比宽度为内容的div和静态宽度为偏斜。

试想一下，这是说，可以说你的页面宽度是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; 
}