How to Create Parallelograms in CSS

March 23, 2020

Create a Parallelogram In CSS

Create a square with a height, width, and background:

.parallelogram {
  width: 100px;
  height: 100px;
  background: salmon;
}

Then use the CSS transform function skew(). The skew() function takes in an angle value either in radians (rad), degrees (deg), gradians (grad), or turns (turn).

.parallelogram {
  width: 100px;
  height: 100px;
  background: salmon;
  transform: skew(25deg);
}

That’s it, you now have a parallelogram in CSS. You can change the angle to get more or less pronounced parallelograms if you want.