带透明填充物的角DIV

Question

我正在试图制作一个角块，以创建一个如下图所示的单页。但我遇到了一个问题。 我试图让div斜坡，但当看着不同的决议，它看起来歪曲。 What i need screen

（也有在这些倾斜的div有一个背景图像和一些孔，其离开这个div前一个问题，画面显示通过。）My Fail Screen

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

我无法理解如何使用宽度为100％的CSS方法来扩展此角度。

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

我将是帮助

Answer 1

您可以使用大众全宽或使用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>

ÿ非常感谢欧也可以使用SVG这个

.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

你也可以使用多个背景图像包括锋利的梯度：

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>