斜めの視差divセクション

いくつかのホームページセクションを作成するにはどうすればよいでしょうか？すべて視差のある背景画像と斜めのエッジがありますか？斜めの視差divセクション

これは、私が作成しようとしているデザインです。http://prnt.sc/ea0avx

それが助け場合、私は私のベースとしてAvadaのテーマを使用して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

斜めの視差divセクション

答えて

関連する問題