Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
html

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 Shape

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

  • HTML
Code demonstrating trapezoid

Explanation

  • Line 3: This is the style tag of HTML for internal CSS.
  • Line 4: We define the properties for the trapezoid class in the body section from lines 5 to 8.
  • Line 5: We set border-top to 30px with solid transparent color.
  • Line 6: We set border-bottom to 30px with solid transparent color.
  • Line 7: We set border-left to 180px with solid #66B2ff color.
  • Line 8: We set border-height to 70px.
  • Line 14: We declare a div class, trapezoid, in HTML to draw a trapezoid.

RELATED TAGS

css
html
RELATED COURSES

View all Courses

Keep Exploring