Dreieck-Block erstreckt sich nicht über die gesamte Breite

Question

Ich habe eine Frage erstellen eine lange scharfe Dreiecks-Box auf einem Bild, so dass ich den Effekt, dass ein Bild leicht abgeschnitten wird erstellen. Wie folgt aus:

Ich habe versucht, mit dem folgenden CSS:

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

Siehe Demo hier: CODEPEN

Aber wie Sie im CodePen das blaue Quadrat nicht Stretching sehen können Gesamtbreite. Ich möchte keine Methoden wie Drehen und ähnliches anwenden. Kann mich jemand in die richtige Richtung führen?

Answer 1

hier, was Sie wollen

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

Codepen

Mit freundlichen Grüßen

Answer 2

Sie müssen sich mit der Menge der Grad und die Prozentsätze in dem Farbverlauf spielen, um:

.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