How to create a trapezoid in CSS

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>

HTML Section: The div element with the trapezoid class.

<body>
    <div class="trapezoid"></div>  
</body>

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.
Free Resources
Copyright ©2026 Educative, Inc. All rights reserved