DIVのオーバーレイ台形図

Question

CSSを使用してこのデザインを試してみましょう。次のように

パーツは以下のとおりです。

1. はbackground image
2. 私はを見て撮影した水平テキスト

と透明backgroundと台形であるがありますTwo-tone background split by diagonal line using cssしかし、まだ少し詰まっています。

CSSは強みではありません！

提案がありますか？

Answer 1

@markEは、これを達成するための良い方法を述べたように（rgbabackgroundでプロパティを使用して）オーバーレイ効果を達成するために平行四辺形divに

注意を.wrapでposition:relativeとposition:absoluteを使用しskew

を使用しています：これは平行四辺形であり、台形ではありません。これは将来の検索で役立つかもしれません。

*, 
 
*::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>