設置兩個div之間的傾斜分隔

我目前正在嘗試爲移動網站創建登錄頁面，並且我想要兩個帶有圖像的主要div。（在我的例子中有顏色）。這是我的HTML：設置兩個div之間的傾斜分隔

<ion-content> 

    <div class="upperblock"></div> 
    <div class="downblock"></div> 

</ion-content>

我的CSS：

.upperblock{ 
    width: 100%; 
    height: 50%; 
    background-color: #2ec95c; 


    } 

    .downblock{ 
    width: 100%; 
    height: 50%; 
    background: #000; 

    }

我想有一個「精益化」的分離，這樣的事情（我的結果的截圖，而紅線是我在哪裏倒是像分離是）：

預先感謝您的任何幫助，也找不到這事！

來源

2017-05-16 saperlipopette

.container { 
 
    position: relative; 
 
    overflow: hidden; 
 
    background-color: #2ec95c; 
 
} 
 
.upperblock { 
 
    width: 100%; 
 
    height: 200px; 
 
    background-color: #2ec95c; 
 
    color: #000; 
 
} 
 

 
.downblock { 
 
    width: 100%; 
 
    height: 200px; 
 
    background-color: #000; 
 
    color: #FFF; 
 
} 
 

 
.block { 
 
    transform: skewY(-6deg); 
 
    padding: 50px; 
 
    margin: -5% 0; 
 
} 
 
.block * { 
 
    transform: skewY(6deg); 
 
}

<div class="container"> 
 
    <div class="block upperblock"> 
 
    <h2>content</h2> 
 
    </div> 
 
    <div class="block downblock"> 
 
    <h2>content</h2> 
 
    </div> 
 
</div>

來源

2017-05-16 13:46:44

謝謝你做到了:-) – saperlipopette

您可能需要添加另一個DIV下來每個格低於（我想應該:after這裏做的伎倆），然後用transform: rotate(15deg)打開它。這將打開div。

重要注意事項：轉身方塊中的內容也會被打開。所以你可能想分離內容和背景div。

其他方法是創建一個SVG圖像。 SVG將完美地擴展和代碼看起來更清潔的方式;）

來源

2017-05-16 13:43:05

並於母公司設置爲相對和「之後」絕對是非常重要的 –

您可以附加一個塊到upperblock DIV使用CSS和旋轉，使用transform。您需要根據自己的內容玩高度，但這會擴大並且有所響應。

.outer { 
 
    overflow: hidden; 
 
} 
 
.upperblock{ 
 
    width: 100%; 
 
    min-height: 40vh; 
 
    background-color: #2ec95c; 
 
    position: relative; 
 
} 
 
.upperblock::after { 
 
    content: ""; 
 
    display: block; 
 
    height: 120px; 
 
    background: #2ec95c; 
 
    width: calc(100% + 50px); 
 
    position: absolute; 
 
    bottom: -60px; 
 
    transform: rotate(7deg); 
 
} 
 

 
.downblock{ 
 
    width: 100%; 
 
    min-height: 60vh; 
 
    background: #000; 
 
}

<div class="outer"> 
 
    <div class="upperblock"></div> 
 
    <div class="downblock"></div> 
 
</div>

來源

2017-05-16 13:47:04

您還可以使用僞元素來實現這一

body { 
 
    margin: 0; 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 

 
.upperblock { 
 
    width: 100%; 
 
    height: 50%; 
 
    background-color: #2ec95c; 
 
    position: relative; 
 
} 
 

 
.downblock { 
 
    width: 100%; 
 
    height: 50%; 
 
    background: #000; 
 
    position: relative; 
 
} 
 

 
.downblock::before { 
 
    content: ""; 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: inherit; 
 
    position: absolute; 
 
    top: 0; 
 
    transform: skewY(-10deg) translateY(-50%); 
 
}

<div class="upperblock"></div> 
 
<div class="downblock"></div>

來源

2017-05-16 14:06:39

設置兩個div之間的傾斜分隔

回答

相關問題