视差分度倾斜

我将如何去创建多个网页的部分章节，所有的视差背景图像和斜边？视差分度倾斜

这是我试图创建设计：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

视差分度倾斜

回答

相关问题