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

8 Characteristics Of Modern Computer

How To Start Coding In 2024?

Computer Memory Measurement Units Chart

Brief History Of Computer

Types of Computer

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

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

Easy Light Bulb Project: HTML, CSS, and JavaScript

Fundamentals Of Computer

Creating Mjölnir Thor Hammer Using HTML and CSS