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.
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.
Final Code: It is the combination of the above two code sections.
- How to Draw a Half Moon using HTML and CSS?
- How to Draw a Semi-Circle using HTML and CSS ?
- How to Draw a Pentagon using HTML and CSS?
- How to draw a circle with gradient border using CSS ?
- How to Draw a Curved Edge Hexagon using CSS ?
- HTML | Canvas Draw Bezier Curve
- How to draw with mouse in HTML 5 canvas ?
- How to draw Inscribed circle of a triangle using p5.js ?
- How to Draw Graphics using Canvas in HTML5 ?
- p5.js | draw() Function
- How to override the CSS properties of a class using another CSS class ?
- How to create a drag and drop feature for reordering the images using HTML CSS and jQueryUI ?
- How to create X and Y axis flip animation using HTML and CSS ?
- Difference between bootstrap.css and bootstrap-theme.css
- How to create Glowing Star effect using HTML and CSS?
- Email Template using HTML and CSS
- Create a Sticky Social Media Bar using HTML and CSS
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.