Coin DIV avec remplissage transparent

Question

J'essaie de faire un bloc de coin, pour créer une page comme sur la photo ci-dessous. Mais j'ai rencontré un problème. J'ai essayé de faire des pentes de div, mais en regardant des résolutions différentes, il semblait tordu. What i need screen

(il y avait aussi un problème en ce qu'avant ces divs inclinés il y avait une image de fond et des trous qui ont laissé cette div, l'image transparaissait.) My Fail Screen

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

Je ne peux pas comprendre comment étendre cet angle en utilisant la méthode CSS à la largeur 100%.

.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>

Je serai très reconnaissant pour l'aide

Answer 1

Vous pouvez utiliser vw pour largeur ou utiliser 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 ous pouvez également utiliser svg pour cette

.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

vous pouvez également utiliser plusieurs images de fond, y compris un fort gradient:

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>