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

Create a Stunning Personal Portfolio Website with HTML & CSS

How To Create A Simple Navigation Bar Using Only HTML and CSS?

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

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

Build a Responsive Product Card Gallery with Plain HTML & CSS

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

How To Create a Fan Using Only HTML and CSS?

The Secret to Flawless Web Design: Mastering Responsive Layouts

Lock the Digital Door: What Aspiring Entrepreneurs Need to Know About Cybersecurity

Sunrise And Sunset Animation Using HTML & CSS?