ブロック要素を斜めに応答性で分割する

Question

1つのボックスを左上から右下に斜めに2つに分割する必要があります。下の部分はちょうど別の色の影を持つことです。

私はデモで値を要求しました。しかし、反応がありません。 photoContainer-divの幅は100％なので、応答します。今問題が発生しました。私は、特定の幅のフォトコンテナーのみの解決策を行いました。しかし、私は応答性の要件が必要です。

.photo-container { 
 
    background-color: lightgreen; 
 
    height: 285px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.shade { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.shade:before { 
 
    content: ""; 
 
    width: 125%; 
 
    height: 100%; 
 
    display: block; 
 
    background-color: #ff0; 
 
    opacity: 0.3; 
 
    position: absolute; 
 
    transform: rotate(14.45deg); 
 
    top: 40%; 
 
    left: -24% 
 
}

<div class="photo-container"> 
 
    <div class="shade"></div> 
 
</div>

Answer 1

背景画像の線形勾配は、この働かを有しています。あなたは

はありがとう

.photo-container { 
 
    background-color: lightgreen; 
 
    height: 285px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.shade { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-image: linear-gradient(to top right, yellow 50%, transparent 50%); 
 
}

<div class="photo-container"> 
 
    <div class="shade"></div> 
 
</div>