How To Create A Trapezium Using HTML and CSS?


STEP 1: Add <div class="trapezium"></div> in your HTML document in the <body> section.
STEP 2: Add this CSS code.


.trapezium{
border-width: 100px;
border-style: solid;
border-color: transparent transparent black transparent;
width: 200px;
 }
 

Output


The border-width: 100px; property gives width to the border, border-style: solid; makes the border surface area solid, and border-color: transparent transparent black transparent; make the top, left, right side border transparent and keep the bottom border black which creates a triangle. Then, the width: 200px; property extends it to make a trapezium or trapezoid.



Trending Posts

How To Create A Magic 8 Ball Using HTML, CSS, and JavaScript?

Image
Create A Magic 8 Ball Project Using HTML, CSS, and JavaScript. HTML Code <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Magic 8 Ball - Created By Rohit Shah</title>     <link rel="stylesheet" href="style.css">     <script src="script.js"></script> </head> <body>     <div class="ball">         <div class="whitesurface">             <p id="response">8</p>         </div>     </div>     <div class="inputfield">      ...
Read More

How To Create A Parallelogram Using HTML and CSS?

Image
STEP 1: Add <div class="parallelogram"></div> into your HTML document inside <body> section. STEP 2: Add this CSS code. .parallelogram{   width: 250px;   height: 150px;   background-color: black;   transform: skew(-30deg);  } Output The width: 250px and height: 150px give width and height to the object. The background-color: black; make the object's background color black to make it visible. Then, the transform: skew(-30deg); property skew the object in X-axis by -30degree. And the parallelogram is created using HTML and CSS.
Read More

Creating a Car Animation with HTML and CSS

Image
  In this blog post, we will create a simple car animation using HTML and CSS. This tutorial will guide you through the process and provide you with the source code. Source Code Below is the HTML and CSS code used for the car animation: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Car Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="car"><img src="car.png" alt=""> <div class="head-light"></div></div> <div class="building"></div> <div class="...
Read More

Easy Light Bulb Project: HTML, CSS, and JavaScript

Image
In this tutorial, we will learn how to create a light bulb using HTML, CSS, and JavaScript. We will go step by step, explaining the code and its functionality. By the end of this tutorial, you will have a working light bulb that can be toggled on and off with a button. HTML Markup <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Light</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <div class="container">         <div class="light"></div>         <div class="cap"></div>     </div>     <button id="power">OFF</button>     <script src="script.js"></sc...
Read More

Create a Stunning Personal Portfolio Website with HTML & CSS

Image
Are you looking to design an impressive personal portfolio website that showcases your skills, projects, and contact information? In this post, I’ll guide you through a simple yet elegant portfolio website built using HTML and CSS. Whether you’re a beginner or an experienced developer, this project can be a great addition to your web development journey. Project Overview This portfolio website is designed to highlight your personal and professional details in a clean and visually appealing way. It features multiple sections like About Me , Skills , Portfolio , and Contact Form . The design is responsive, making it accessible on all devices, including desktops, tablets, and smartphones. Features of the Portfolio Navigation Bar: Smooth navigation to all sections with a stylish hover effect. Intro Section: A bold introduction with a profile image and social links. About Me: A...
Read More

Different Types Of Hackers | Who is Hacker?

Image
If you think there is only one type of hacker who does illegal activities, then you’re mistaken. Hackers come in all kinds, and while some break the law, others work to protect valuable data and improve system security. Let’s dive into the world of hackers to understand their different types and motivations. Who is a Hacker? A hacker is someone with advanced technical skills who explores and often manipulates systems and networks. They can access information within computers, networks, or other systems. But contrary to popular belief, not all hackers break the law. Types of Hackers The world of hacking is vast, but three main types of hackers stand out: white hat, black hat, and grey hat hackers. Each group has its own motives, methods, and impacts on the digital world. White Hat Hacker A White Hat Hacker uses their skills for good. Often called ethical hackers , these professionals work to improve cybersecurity by identifying system vulnerabilities and protecting against ...
Read More

8 Characteristics Of Modern Computer

Image
In today’s digital age, computers have become essential tools in nearly every aspect of life. Whether it’s managing day-to-day tasks, storing massive amounts of data, or solving complex calculations, computers have fundamentally changed the way we operate. Computers exhibit various characteristics that make them indispensable in almost every field. From high-speed processing to their automation abilities, here’s a look at some of the most important traits that define a computer. 1. Speed One of the primary reasons computers are so powerful is their incredible speed. They can process simple and complex calculations in a fraction of a second—far faster than any human. The processing speed of a computer is measured in Hertz (Hz) , which represents the number of cycles per second. This is further classified into: KiloHertz (KHz) – Thousands of cycles per second. MegaHertz (MHz) – Millions of cycles per second. GigaHertz (GHz) – Billions of cycles per second. TeraH...
Read More

What is Web Development? A Beginner's Guide

Image
Welcome to our beginner's guide to web development! In this blog post, we will demystify the world of web development and provide you with a clear understanding of what it entails. Whether you're considering a career in web development or simply curious about how websites are created, this guide is for you. Let's dive in! What is Web Development? Web development refers to the process of building and maintaining websites and web applications. It involves a combination of programming, designing, and problem-solving skills to create interactive and functional websites that can be accessed by users across the internet. Front-End Development: Front-end development focuses on the user-facing part of a website. Front-end developers use HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript to create the visual and interactive elements that users see and interact with in their web browsers. They are responsible for creating an engaging user exper...
Read More

Sunrise And Sunset Animation Using HTML & CSS?

Image
HTML Code <html lang="en"> <head>     <meta charset="UTF-8"></meta>     <meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>     <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>     <title>Sunrise and Sunset</title>     <link href="style.css" rel="stylesheet"></link> </head> <body>     <div id="sun"></div>     <div class="hill"></div>     <div class="hill"></div>     <div class="hill"></div>     <div class="hill"></div>     <div class="hill"></div>     <div id="land"></div> </body> </html> CSS Code *{ box-sizing: border-box; margin: 0; padding:0; } body{ background-...
Read More