How to create parallelograms divs?

Question

I am working on a project where I have to create something similar what is showing in the image below. Concretely, the yellow parallelograms with text that are showing inside the red rectangular (I dont need this red rectangular). As you know the divs by default are rectangular

So then my question is, how could create 3 parallelogram-divs or something similiar?

Any advices or guidelines would be appreciated

Thanks

PS: I cannot use a image as background because, If you do the windows smaller the backround doesn't follow the text

Answer 1

You can use the negative SkewX transform to get the desired effect:

div {
  margin: 20px;
  width: 200px;
  height: 100px;
  display: inline-block;
  background: yellow;    
  border: 1px solid black;
  transform: skewX(-10deg);
  }

<div></div>