Shaped background - css

Question

I would like to make some background shapes on my website ...
this is the look that I want
I have tried using the method with rotated/skewed rectangles, it works perfect just when I have only one color on the section below (because I can use the same color for the shapes). If I want to use a texture like in the image attached I will end up having this depending on what method I use. I have also tried using a svg for making the shapes, but I'm not sure if it's the best solution. I'm wondering if there is a clever way to do this. I realize maybe I'm not as clear as a should be, but thank you for finding time to read this.

Answer 1

You'll probably want to experiment with SVGs and masks, depending upon how complicated your shapes are going to be. You can find some great guidance here: https://www.sitepoint.com/masking-in-the-browser-with-css-and-svg/.
Illustrator can be saved as an SVG, but if you're using Sketch it's even easier! You'll notice the code outputs individual coordinates.
You can see a decent demo here: http://cssplant.com/clip-path-generator

Answer 2

This a concept. Try self to work project.
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 100vw;
padding-top: 50%;
position: relative;
background-image: linear-gradient(90deg, rgba(0, 0, 0, .5) 66.6666667%, rgba(255, 255, 0, .6) 66.6666667%), url(http://beerhold.it/1200/600);
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
.wrapper:nth-child(2) {
background-image: linear-gradient(90deg, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .7) 100%), url(http://beerhold.it/1400/700);
}
.topleft,
.topright,
.bottomleft,
.bottomright {
position: absolute;
top: 0;
height: 100%;
}
.topleft {
left: 0;
top: 40%;
width: 66.66666667%;
background-image: linear-gradient(transparent 0, transparent 50%, #fff 50%, #fff);
transform: skewY(7deg);
}
.topright {
left: 66.66666667%;
width: 33.33333334%;
top: 42.3%;
background-image: linear-gradient(transparent 0, transparent 50%, #fff 50%, #fff);
transform: skewY(-10deg);
}
.bottomleft {
left: 0;
top: -94%;
width: 33.33333334%;
background-image: linear-gradient(180deg, transparent 0, transparent 50%, #fff 50%, #fff );
transform: skewY(-10deg);
}
.bottomright {
left: 33.33333334%;
width: 66.66666667%;
top: -92%;
background-image: linear-gradient(180deg, transparent 0, transparent 50%, #fff 50%, #fff);
transform: skewY(7deg);
}
<div class="wrapper">
<div class="topleft"></div>
<div class="topright"></div>
</div>
<div class="wrapper">
<div class="topleft"></div>
<div class="topright"></div>
<div class="bottomleft"></div>
<div class="bottomright"></div>
</div>