響應對齊傾斜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; 
}