SashayAway SashayAway - 9 months ago 56
CSS Question

How to create parallelograms divs?

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

enter image description here

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

Any advices or guidelines would be appreciated


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

Answer Source

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);