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

5 Awesome Computer Shortcut Key Tricks You Must Try

What Are The Use of Function Keys F1 to F12 on The Keyboard?

Is Web Development Dying In 2022?

Why iPhones Don't Have Memory Card Slots?

Why Do All Celebrities Use iPhones?

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

12MP vs 48MP vs 64MP vs 108MP | Does More Megapixel Equal Better Image Quality?

Can I Start Coding At The Age of 30, 40 or 50?

How To Take Screenshot On HP, Dell, Asus Laptop And PC?

How To Make Your Computer Fast?