Ecke DIV mit transparenter Füllung

Question

Ich versuche, eine Ecke zu machen, um eine Seite wie auf dem Foto unten zu erstellen. Aber ich stieß auf ein Problem. Ich habe versucht, div Pisten zu machen, aber bei der Betrachtung der verschiedenen Auflösungen sah es schief aus. What i need screen

(es, dass auch ein Problem war, bevor diese geneigten divs ein Hintergrundbild war und einige Löcher, die dieses div links, zeigte das Bild durch.) My Fail Screen

.tri-index-right { 
 
    background: #fff; 
 
    height: 150px; 
 
    width: 100%; 
 
    transform: skewY(4deg); 
 
    overflow: hidden; 
 
    position: relative; 
 
    z-index: 2; /*fail method*/ 
 
}

Ich kann nicht verstehen, wie dieser Winkel mit der CSS-Methode bei 100% Breite erweitert werden kann.

.1 { 
 
    min-width: 500px; 
 
} 
 
#triangle-left { 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-top: 10px solid transparent; 
 
\t border-right: 100px solid red; 
 
\t border-bottom: 100% solid transparent; 
 
}

<div class="1"> 
 
<div id="triangle-left"></div> 
 
</div>

werde ich für die Hilfe sehr dankbar

Answer 1

Sie vw für volle Breite verwenden oder verwenden svg

.one { 
 
    width: 100%; 
 
    height: 200px; 
 
    background: url('https://imgur.com/a/kA3XA') center center no-repeat; 
 
    background-size: cover; 
 
} 
 

 
#triangle-left { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 100px solid transparent; 
 
    border-right: 100vw solid red; 
 
}

<div class="one"> 
 
    <div id="triangle-left"></div> 
 
</div>

y ou kann auch svg für dieses

.main { 
 
    position: relative; 
 
    min-height: 200px; 
 
} 
 

 
.svg-container svg { 
 
    width: 100%; 
 
    height: 150px; 
 
    fill: #333; /* change color to white since */ 
 
}

<div class="main"> 
 
    <!-- main image --> 
 
</div> 
 
<div class="svg-container"> 
 
    <svg xmlns="https://www.w3.org/2000/svg" version="1.1" class="separator" viewBox="0 0 100 100" preserveAspectRatio="none"> 
 
    <path d="M0 100 L100 0 L100 100 Z"></path> 
 
    </svg> 
 
</div>

Answer 2

verwenden Sie auch mehrere Hintergrundbild mit einem scharfen Gradienten verwenden können:

header { 
 
    min-height: 4em; 
 
    background: 
 
    /* first the mask */ 
 
    linear-gradient(to bottom right, transparent 49.5%, white 50.5%) bottom left no-repeat, 
 
    /* then the background image */ 
 
    url(http://lorempixel.com/400/300/abstract/1) 0 0; 
 
    /* finally resize each image, in particular the mask */ 
 
    background-size: 100% 4em, cover; 
 
    padding: 1em 2em 4em; 
 
    color: white; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
div { 
 
    padding: 1em; 
 
}

<header> 
 
    <h1>whatever</h1> 
 
</header> 
 
<div>next content</div>