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:
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!
