如何創建一個應用了背景圖像的傾斜的div？

Question

我想使一個傾斜的div與背景圖像。 HERE是我試圖實現的屏幕截圖。

我一直使用css三角形制作我的傾斜的div。但是，我發現這種技術在這種情況下很麻煩，因爲它是2個獨立的部分，圖片不會連接。

截至目前在我的代碼我有一個元素之前有應用背景圖像，看起來像這樣一個div：

#booking-form:before{ 
    content: ""; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: -320px; 
    border-top: 726px solid transparent; 
    border-right: 320px solid $secondary; 
} 

這讓我找但是如果我添加圖像的三角形到三角形它充滿整個css之前，看起來像this：

但我需要它看起來像original。

有什麼建議嗎？謝謝！

Answer 1

只需使用具有適當傾斜漸變背景的全寬div代替。

沒有變換，沒有邊界。

body { 
 
    text-align: center; 
 
} 
 
.content { 
 
    height: 150px; 
 
    padding: 20px 0; 
 
    background: linear-gradient(-65deg, rgba(0, 0, 255, 0.5) 65%, transparent 65%); 
 
    display: flex; 
 
} 
 
div { 
 
    background-image: url(http://www.fillmurray.com/460/300); 
 
} 
 
form { 
 
    width: 50%; 
 
    background: rgba(255, 255, 255, 0.85); 
 
    margin-left: auto; 
 
    margin-right: 1em; 
 
}

<div> 
 
    <div class="content"> 
 
    <form action=""></form> 
 
    </div> 
 
</div>

Answer 2

遺憾的是沒有avalaible無處不在，mix-blend-mode可能是一個暗示使用梯度選擇至極部分融爲一體

body { 
 
    height: 100%; 
 
    background: linear-gradient(110deg, white 45%, transparent 45%), url(http://lorempixel.com/800/600/city/3) right no-repeat; 
 
    background-size: 100% 100%, 75% auto ; 
 
    margin: 0; 
 
} 
 

 
html { 
 
    height: 100%; 
 
    min-width:800px; 
 
    margin: 0; 
 
    background: linear-gradient(110deg, transparent 45%, darkcyan 45%), url(http://lorempixel.com/800/600/city/2)top left no-repeat; 
 
    background-size: 100% 100%, 75% auto; 
 
} 
 

 
body { 
 
    mix-blend-mode: overlay; 
 
} 
 
/* demo purpose */ 
 
body>div { 
 
    padding:1px; 
 
    padding-left: 55%; 
 
    color: black; 
 
} 
 
body>p { 
 
    margin:0; 
 
    } 
 
/* small snippet view purpose */ 
 
html, body { 
 
background-attachment:fixed; 
 
}

<p> nop, mix-blend-mode is not avalaible here :(</p> 
 
<div> 
 
    <h2 name="Summary" id="Summary">Summary<a class="button section-edit only-icon" href="/en-US/docs/Web/CSS/mix-blend-mode$edit#Summary"><i aria-hidden="true" class="icon-pencil"></i><span>Edit</span></a></h2> 
 

 
    <p>The <strong><code>mix-blend-mode</code></strong> CSS property describes how an element's content should blend with the content of the element that is below it and the element's background.</p> 
 

 
    <p></p> 
 
    <table class="properties"> 
 
    <tbody> 
 
     <tr> 
 
     <th scope="row"><a href="/en-US/docs/Web/CSS/initial_value">Initial value</a></th> 
 
     <td><code>normal</code></td> 
 
     </tr> 
 
     <tr> 
 
     <th scope="row">Applies to</th> 
 
     <td>all HTML elements</td> 
 
     </tr> 
 
     <tr> 
 
     <th scope="row"><a href="/en-US/docs/Web/CSS/inheritance">Inherited</a></th> 
 
     <td>no</td> 
 
     </tr> 
 
     <tr> 
 
     <th scope="row">Media</th> 
 
     <td>visual</td> 
 
     </tr> 
 
     <tr> 
 
     <th scope="row"><a href="/en-US/docs/Web/CSS/computed_value">Computed value</a></th> 
 
     <td>as specified</td> 
 
     </tr> 
 
     <tr> 
 
     <th scope="row">Animation type</th> 
 
     <td>discrete</td> 
 
     </tr> 
 
     <tr> 
 
     <th scope="row">Canonical order</th> 
 
     <td>the unique non-ambiguous order defined by the formal grammar</td> 
 
     </tr> 
 
     <tr> 
 
     <th scope="row">Creates <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a></th> 
 
     <td>yes</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>