Question

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

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

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

Answer 1

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

作者详细说明了如何编写css，使得这些部分具有倾斜的边框。

Answer 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

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

如果有帮助，请投票赞成！

具有倾斜的视差div部分

3 个答案: