Initially when I thought this is straightforward, maybe since I just woke up and am still in sleepy mode. Later when I had to insert the middle element, it was not right as overlapping was weird.
So we go back to the correct way. We include the right element first because of the stacking context.
We include a similar rectangle of different color and height as the midsection. We also need to add some skew() to the mid rectangle. The last element on the left is just replica of the first element but has a different position.
Finally, we get the confetti but I still see the border of the mid section in diff image. That could be because of the browser rendering of skew. Play around with the minified code: