Wie erstellt man ein schräges Div mit einem Hintergrundbild?

Question

Ich versuche ein schräges Div mit einem Hintergrundbild zu machen. HERE ist ein Screenshot von dem, was ich versuche zu erreichen.

Ich habe immer meine schrägen divs mit css Dreiecke gemacht. Jedoch finde ich diese Technik in dieser Situation schwierig, weil es 2 getrennte Teile ist und die Bilder nicht verbinden.

Ab jetzt in meinem Code habe ich einen div mit dem Hintergrundbild mit einem aufgebracht, bevor Elemente, das wie folgt aussieht:

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

Dies auf das Dreieck macht Ich suche aber für, wenn ich ein Bild hinzufügen zu dem Dreieck füllt es die gesamte vor css und sieht aus wie this:

Aber ich brauche es wie die original aussehen.

Irgendwelche Vorschläge? Vielen Dank!

Answer 1

Verwenden Sie stattdessen ein div mit voller Breite mit einem geeigneten Winkel Hintergrund.

Keine Transformationen, keine Grenzen.

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

Leider nicht überall avalaible,

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>