Overlay Trapezform auf DIV

Question

Versuchen, dieses Design mit CSS zu bekommen.

Die Teile sind wie folgt:

1. ein background image
2. ist ein trapez mit einer transparenten background mit horizontalem Text

ich genommen hat habe einen Blick auf Two-tone background split by diagonal line using css aber bin noch ein bisschen ratlos.

CSS ist kein starker Punkt!

Irgendwelche Vorschläge?

Answer 1

als @markE erwähnte eine gute Möglichkeit, dies zu erreichen, wird mit skew

Verwenden position:relative in .wrap und position:absolute im Parallelogramm div den Overlay-Effekt (mit dem rgba in background Eigenschaft)

Hinweis zu erreichen: Dies ist ein Parallelogramm, kein Trapez - dies könnte Ihnen bei zukünftigen Suchen helfen.

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    margin: 0 
 
} 
 
.wrap { 
 
    position: relative; 
 
    border: 5px solid black; 
 
    height: 500px; 
 
    width: 100%; 
 
    background: url("//lorempixel.com/1200/600") 
 
} 
 
.parallelogram { 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 100px; 
 
    width: 350px; 
 
    height: 250px; 
 
    background: rgba(255, 255, 255, .5); 
 
    border: solid black; 
 
    border-width: 5px 0 5px 5px; 
 
    transform: skew(0, -15deg); 
 
} 
 
span { 
 
    display: block; 
 
    transform: skew(0, 15deg); 
 
    margin: 70px 30px 0; 
 
}

<div class="wrap"> 
 
    <div class="parallelogram"><span>title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 </span> 
 
    </div> 
 
</div>