How to Draw a Trapezium using HTML and CSS ?
A Trapezium is a Quadrilateral which has two parallel and two non-parallel sides. In this article we will create a Trapezium shape using simple HTML and CSS.
HTML Code: In this section, we will create a simple element using the HTML div tag.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Trapezium</title></head><body> <div class="trapezium"></div> </body></html> |
CSS Code: In this section, we will first design the div element using some basic CSS properties and then use the border-bottom, border-left and border-right properties to create the trapezium shape.
css
<style> /* creating the trapezium shape*/ .trapezium { height: 0; width: 150px; border-bottom: 150px solid green; border-left: 100px solid transparent; border-right: 100px solid transparent; }</style> |
Final Code: It is the combination of the above two code sections.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Trapezium</title> <style> /* Creating the trapezium shape*/ .trapezium { height: 0; width: 150px; border-bottom: 150px solid green; border-left: 100px solid transparent; border-right: 100px solid transparent; } </style></head><body> <div class="trapezium"></div></body></html> |
Output:
Please Login to comment...