A two-dimensional rectangular shape with two non-parallel sides is known as a trapezoid. It is similar to a parallelogram or a rectangle. The following are some examples of trapezoids.
Let's try to create the first sky-blue shape in the figure above. For that, we have to design a div element of HTML with a class property of CSS named trapezoid. After that, we use CSS border properties (left, top, and bottom), and we will use the default value of border-right for div to create a Trapezoid shape. Let's have a look at the CSS script below:
CSS Section: Style-properties for Border (left, top and bottom).
<style>.trapezoid {border-bottom: 30px solid transparent;border-Top: 30px solid transparent;border-left: 180px solid #66B2ff;height: 70px;}</style>
HTML Section: The div element with the trapezoid class.
<body><div class="trapezoid"></div></body>
style tag of HTML for internal CSS.trapezoid class in the body section from lines 5 to 8.border-top to 30px with solid transparent color.border-bottom to 30px with solid transparent color.border-left to 180px with solid #66B2ff color.border-height to 70px.div class, trapezoid, in HTML to draw a trapezoid.Free Resources