How to create a parallelogram in CSS

Overview

In order to make the parallelogram, we first have to make a rectangle, and then we add the transform:skew(20deg); property. We can also change the degree values according to our own choice.

To create a parallelogram, we follow these three steps:

Step 1: Add HTML

HTML code for a parallelogram

Explanation

  • Line 4: We make the heading that will be shown above the parallelogram.

  • Line 5: We make a div and call the styling for the parallelogram.

Step 2: Add CSS

CSS code for parallelogram

Explanation

  • Lines 3–4: We set the height and width of the parallelogram.

  • Line 5: We set the transform property to make a parallelogram.

  • Line 6: We set the background color of a parallelogram.

Step 3: Combine HTML and CSS

We now combine the HTML and CSS files.

Final output