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.
.png)
