斜めに積み重ねられたdivと背景画像を持つ可能性がありますか？

Question

こんにちは、私はHTMLとCSSを模倣しようとしているこの画像を見てください。

トップdivが白い背景との定期的なdiv要素です。 下のdivに背景ビデオが表示されます。

HTML構造は簡単で、次のようになります。

<div class="top-div"> 
    <!-- stuff --> 
</div> 

<div class="bottom-div"> 

    <video autoplay="" loop=""> 
      <source src="myvideo.mp4" type="video/mp4"> 
      <source src="myvideo.ogg" type="video/ogg"> 
    </video> 

</div> 

CSS：

 .top-div { 
      height: 500px; 
      width: 100% 
     } 

     .bottom-div { 
      height: 500px; 
      width: 100%; 
      position: relative; 
     } 

     .banner video { 
      position: absolute; 
      right: 0; 
      bottom: 0; 
      min-width: 100%; 
      min-height: 100%; 
      width: auto; 
      height: auto; 
      z-index: -1; 
      background: url() no-repeat; 
      background-size: cover; 
      filter: brightness(30%); 
      -webkit-filter: brightness(30%); 
     } 

は、私はきちんと動画をセットアップする方法を知っているが、私はついて行くには方法がわかりませんよ傾斜効果を作り出す。

私は擬似要素を使って三角形を作成し、それをdivの上に置き、ビデオdiv上にzインデックスを付けることができたと思っていましたが、ちょっとハッキリです。

これを行うのがベストプラクティスですか？私は完全なコードを与えるために誰かのためにこの質問を書いていませんでした。私はちょうど正しい方向に私を向ける誰かが必要と私はそれを自分で行うことができます。

ありがとうございます！

Answer 1

簡単で簡単な方法は、CSS transform: skewです。これをdiv内に追加して傾斜させ、度を調整します。スキュースタイル手段（値は0deg（X）、-5deg（Y））軸上

transform: skew(0deg,-5deg);

。

* { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    margin:0; 
 
} 
 

 
.headerimage { 
 
    background-color:#003a6f; 
 
    height:300px; 
 
    width:100%; 
 
    background-size:cover; 
 
    position:relative; 
 
    z-index:-1; 
 
} 
 

 
#backshape { 
 
    z-index:1; 
 
    display:block; 
 
    float:left; 
 
    margin-top:-100px; 
 
    width:100%; 
 
    background:white; 
 
    transform:skew(0deg,10deg); 
 
-ms-transform:skew(0deg,10deg); /* IE 9 */ 
 
-webkit-transform: skew(0deg,-5deg); 
 
} 
 

 
.full-image { 
 
    width: 100%; 
 
    height: 200px; 
 
} 
 

 
.footer { 
 
    height: 100px; 
 
    background: rgb(253, 253, 253); 
 
    width: 100%; 
 
    margin-top: 425px; 
 
    z-index: 500; 
 
    position: relative; 
 
}

<div class="headerimage"> 
 
    &nbsp; 
 
</div> 
 
<div id="backshape"> 
 
    <img src="http://placehold.it/540x500" class="full-image"> 
 
</div> 
 
<div class="footer"> 
 
&nbsp; 
 
</div>

Answer 2

@adamが示唆したように、私は一緒にスキューを使ってペンを入れています。

http://codepen.io/anon/pen/XNMPWG

HTML

<header class="header" id="header"> 
    <div class="skew"> 
     <div class="header-inner"> 
      <h1 class="logo">White space</h1> 
     </div> 
    </div> 
</header> 
<div class="container"> 
    <main class="main"> 
     <div class="main-container"> 
      <section> 
       <h1>Video</h1> 
       <p></p> 
      </section> 
     </div> 
    </main> 
</div> 

CSS

html { 
    font-family: 'Roboto Condensed'; 
    color: #fff; 
    background: #fafafa; 
} 

body { 
    padding: 0em 0em; 
} 

.header { 
    z-index: 1; 
    position: relative; 
} 

.header .skew:before { 
    content: ''; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    overflow: visible; 
    width: 100%; 
    height: 250px; 
    background: #00bcd4; 
    z-index: -1; 
    -webkit-transform: skewY(-10deg); 
    -moz-transform: skewY(-10deg); 
    -ms-transform: skewY(-10deg); 
    -o-transform: skewY(-10deg); 
    transform: skewY(-10deg); 
    -webkit-backface-visibility: hidden; 
    backface-visibility: initial; 
} 

.header .skew .header-inner { 
    padding: 20px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.logo { 
    margin: 0; 
} 

section 
{ 
    text-align:center; 
    color: white; 
    background-color: red; 
    height: 100vh; 
    width: 100%; 
    position: absolute; 
    top: 0; 
} 
section h1 { 
    text-align: center; 
    color: white; 
    padding-top: 150px; 
} 

skewY()は、所定角度だけY軸に沿った要素をスキュー。 transform: skewY(-10deg);