带有倾斜的视差 div 部分答案

【问题标题】：Parallax div sections with a slant带有倾斜的视差 div 部分
【发布时间】：2017-02-18 02:16:33
【问题描述】：

我将如何创建多个主页部分，所有部分都带有视差背景图像和倾斜的边缘？

这是我正在尝试创建的设计：http://prnt.sc/ea0avx

如果有帮助，我将在 Wordpress 中使用 Avada 主题作为基础进行构建。

【问题讨论】：

标签： html css wordpress background parallax

【解决方案1】：

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

作者详细介绍了如何编写 css 以使部分具有倾斜的边框。

【讨论】：

这应该被接受的答案，在源代码中有这么好的解释。谢谢！

【解决方案2】：

您可以只变换有角度的 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

【讨论】：

如何在图片背景下做到这一点，而不会在两张图片之间留出空隙？

【解决方案3】：

要实现视差背景效果，请使用这些代码行。

示例：

.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%);
}

如果有帮助请投票！

【讨论】：