How to Create Parallelograms in CSS

Create a Parallelogram In CSS

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

1..parallelogram {
2.    width: 100px;
3.    height: 100px;
4.    background: salmon;
5.}

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

1..parallelogram {
2.    width: 100px;
3.    height: 100px;
4.    background: salmon;
5.    transform: skew(25deg);
6.}

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.