How To Create A Trapezium Using HTML and CSS?


STEP 1: Add <div class="trapezium"></div> in your HTML document in the <body> section.
STEP 2: Add this CSS code.


.trapezium{
border-width: 100px;
border-style: solid;
border-color: transparent transparent black transparent;
width: 200px;
 }
 

Output


The border-width: 100px; property gives width to the border, border-style: solid; makes the border surface area solid, and border-color: transparent transparent black transparent; make the top, left, right side border transparent and keep the bottom border black which creates a triangle. Then, the width: 200px; property extends it to make a trapezium or trapezoid.



Trending Posts

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

How To Make Your Computer Fast?

The Edge Advantage: How Smart Small Businesses Are Winning Without Waiting

The Secret to Flawless Web Design: Mastering Responsive Layouts

Apple Supplier Hacked By REvil, Hacker Groups Claims For $50 Million From Apple

Why Should You Create Programming Notebooks?

How To Create A Parallelogram Using HTML and CSS?

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

5 Tips To Become A Computer Genius | How To Become A Computer Genius?

How To Earn Money With Only HTML and CSS Knowledge?