How to draw responsive parallelograms with css?

Hi there!

I have been trying to create such a template on a webpage, with some content inside these two parallelograms but I haven’t been able to find how to do that yet:

I would greatly appreciate it if you could give me some ideas on how to realize it or some css snippets. What I’ve done so far:

  1. created two grid areas
  2. drew rectangles and skew edthem - but at this moment problems started because I couldn’t catch the bottom left angle of my parallelogram to get it fixed.

Thank you!

What do you think of this responsive parelleograms? I’m not sure how you would ensure they stay within the parent though. Could you send a codepen of the progress you’ve made?