Trusted answers to developer questions
How to create a trapezoid in CSS
Sharaz Haider
What is a trapezoid?
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.
Trapezoid with CSS
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>CSS for Trapezoid
HTML Section: The div element with the trapezoid class.
<body>
<div class="trapezoid"></div>
</body>HTML for Trapezoid
Example
Explanation
- Line 3: This is the
styletag of HTML for internal CSS. - Line 4: We define the properties for the
trapezoidclass in the body section from lines 5 to 8. - Line 5: We set
border-topto30pxwithsolid transparentcolor. - Line 6: We set
border-bottomto30pxwithsolid transparentcolor. - Line 7: We set
border-leftto180pxwithsolid #66B2ffcolor. - Line 8: We set
border-heightto70px. - Line 14: We declare a
divclass,trapezoid, in HTML to draw a trapezoid.
RELATED TAGS
css
html
CONTRIBUTOR
Sharaz Haider
RELATED COURSES
View all Courses
Keep Exploring
Related Courses
