三角ブロックが全幅に伸びていない

Question

画像の上に長いシャープな三角形のボックスを作成して、画像がわずかにカットされるというエフェクトを作成する質問があります。このように：

私は、次のCSSを使用してみました：ここ

.overlay{ 
    background-image: linear-gradient(10deg, lightblue 50%, transparent 50%); 
    height: 165px; 
    width:100%; 
} 

参照のデモ：CODEPEN

しかし、あなたは青い四角がにストレッチされていないCodePen以内に見ることができるように全幅。私は回転やもののようなメソッドを適用したくない。誰かが正しい方向に私を導くことができますか？

Answer 1

何をしたい

.overlay{ 
    background-image: linear-gradient(-2deg, lightblue 45%, transparent 45%); 
    height: 165px; 
    width:100%; 
    bottom: 0; 
    position: absolute; 
} 

Codepen

種類について

Answer 2

あなたは度の量とあなたの勾配の割合で遊んでする必要があります。ここでは

.fixedheight { 
 
    height: 590px; 
 
    background-image: url(http://www.kaylainthecity.com/wp-content/uploads/gym.jpg); 
 
    background-size: cover; 
 
    background-position: center; 
 
    position: relATIVE; 
 
} 
 

 
.overlay { 
 
    POSITION: ABSOLUTE; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-image: linear-gradient(-3deg, lightblue 55%, transparent 56%); 
 
    height: 165px; 
 
    width: 100%; 
 
}

<div class="container-fluid"> 
 
    <div class="row fixedheight"> 
 
    <div class="pic"></div> 
 
    <div class="overlay"></div> 
 
    </div> 
 
</div>

Updated Pen