How to draw responsive parallelograms with css?

HTML-CSS
1

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:

Screenshot 2020-12-03 at 10.59.45
Screenshot 2020-12-03 at 10.59.451322×965 18.3 KB

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!

2

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?