視差分度傾斜

我將如何去創建多個網頁的部分章節，所有的視差背景圖像和斜邊？視差分度傾斜

這是我試圖創建設計：http://prnt.sc/ea0avx

如果有幫助，我用阿瓦達索主題作爲我的基地內的WordPress建設。

來源

2017-02-17 Craig Newman

https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms

的作者詳細介紹如何編寫CSS使得部分具有傾斜的邊界。

來源

2017-02-17 17:52:02 user3689303

您可以直接變換成角度的div並在他們圈關閉屏幕。

<style> 
 
    body { 
 
     margin: 0; 
 
    } 
 

 
    .angle { 
 
     margin: -75px; 
 
     top: 350px; 
 
     height: 400px; 
 
     background: green; 
 
     transform: rotate(-5deg); 
 
     z-index: 5; 
 
    } 
 

 
    .revAngle { 
 
     margin: -75px; 
 
     width: 150%; 
 
     height: 400px; 
 
     background: green; 
 
     transform: rotate(5deg); 
 
     z-index: 5; 
 
    } 
 

 
    .strait { 
 
     height: 500px; 
 
     background: pink; 
 
    } 
 

 
</style> 
 

 
<html> 
 
<div class="strait"></div> 
 
<div class="angle"></div> 
 
<div class="strait"></div> 
 
<div class="revAngle"></div> 
 
<div class="strait"></div> 
 
</html>

http://codepen.io/kevinlbatchelor/pen/ggJmYK

來源

2017-02-17 18:04:48

要實現沿着這行代碼的視差背景效果使用的東西。

例子：

.parallaxdiv { 
    /* The image used */ 
    background-image: url("img_parallax.jpg"); 

    /* The Full height */ 
    height: 100%; 

    /* Create the parallax scrolling effect */ 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
}

我不完全相信你的斜邊的意思，但你可以嘗試使用CSS夾路徑，實現了傾斜的影響。

一個例子：

.img { 
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); 
    clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); 
}

請投票，如果它可以幫助！

來源

2017-02-17 18:16:33

視差分度傾斜

回答

相關問題