可能有一個具有背景圖像的傾斜的堆疊divs？

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

我知道如何正確地設置了視頻，但我不知道該如何去使傾斜的效果。

我在想我可以用一個psuedo元素來創建一個三角形，並將它放在div的頂部，並讓它在視頻div上索引，但這看起來有點冒失。

是否有最佳做法來做到這一點？我沒有寫這個問題讓別人給我完整的代碼。我只需要有人指引我走向正確的方向，我可以自己做。

謝謝！

Answer 1

簡單易用的方法是使用CSS transform: skew。把這個添加到你想要傾斜的div中，然後調整度數。

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

以上歪斜式裝置（0deg（x）中，-5deg（Y））軸。

* { 
 
    -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);