Connect with us!

Creating Trapezoid using HTML and CSS

Trapezoid is created by having two parallel sides and two non parallel sides. Creating trapezoid using CSS and HTML is a intermediate tutorial.

CSS Properties Definitions

  • The border-bottom property specifies the bottom parallel side.
  • The border-left property specifies the unparallel side on the left
  • The border-right property specifies the right unparallel side

Code Block

Here is the code for creating the trapezoid:

.trapezoid {
        border-bottom: 100px solid #99d3ff;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        height: 0;
        width: 100px;
      }

Here is the output:

Trapezoid

Video Tutorial

You can find the complete coding  tutorial in the following YouTube Video

Here is the complete HTML and CSS: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .trapezoid {
        border-bottom: 100px solid #99d3ff;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        height: 0;
        width: 100px;
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Trapezoid</h1>
    <div class="trapezoid"></div>
  </body>
</html>

Thank you for reading. I hope that it has helped you with your project. Good luck and happy coding!

Related Posts

Trending now

Creating Six Sided Star for rating using HTML and CSS
Creating Diamond using HTML and CSS
Creating Triangle using HTML and CSS
Creating Trapezoid using HTML and CSS