How To Create A Parallelogram Using HTML and CSS?


STEP 1: Add <div class="parallelogram"></div> into your HTML document inside <body> section.
STEP 2: Add this CSS code.


.parallelogram{
  width: 250px;
  height: 150px;
  background-color: black;
  transform: skew(-30deg);
 }

Output



The width: 250px and height: 150px give width and height to the object. The background-color: black; make the object's background color black to make it visible. Then, the transform: skew(-30deg); property skew the object in X-axis by -30degree. And the parallelogram is created using HTML and CSS.


Trending Posts

How To Create a Fake Facebook Login Clone Using Only HTML and CSS?

Can I Code If I'm Bad at Math? (Spoiler: Yes, You Can!)

Sunrise And Sunset Animation Using HTML & CSS?

How To Create A Magic 8 Ball Using HTML, CSS, and JavaScript?

8 Characteristics Of Modern Computer

Build a Responsive Product Card Gallery with Plain HTML & CSS

What is Blogging Business? A Beginner’s Guide to Making Money Online

AI is Learning to Code — Should Web Developers Be Worried?

Learn How to Code Like a Pro with These Beginner-Friendly Tips for Web Development

The Secret to Flawless Web Design: Mastering Responsive Layouts