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 Fake Facebook Login Clone Using Only HTML and CSS?

Image
First of all these HTML elements into your HTML document. Copy the code From Our Github   <div><h1>Facebook</h1>         <p>Connect with friends and the world<br> around you on Facebook.</p>     </div>     <div class="form">         <form action="">        <div>         <input type="text" name="Username" id="Username" placeholder="Email or Phone Number">        </div>        <div>         <input type="password" name="Password" id="Password" placeholder="Password">        </div>        <div>         <input type="submit" value="Log ...
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

60hz vs 90hz vs 120hz | Which One is Best? | What is Refresh Rate?

Image
  What is Refresh Rate? Refresh Rate is the number of times per second a display refresh the information. Most of the smartphones come with a 60hz refresh rate specially, in the budget and mid-range segment. 60hz refresh rate means a display update the image or information 60 times per second.     60hz => 60 times per second 90hz => 90 times per second 120hz => 120 times per second 144hz => 144 times per second and so on. 60hz vs 90hz vs 120hz Most of the budget and lower mid-range phones come with a 60hz refresh rate, where upper mid-range and flagship phones come with a 90hz and 120hz refresh rate. Well, all these three refresh rates are best. But, 90hz and 120hz display will give you a smoother experience than 60hz. That doesn't mean 60hz is bad. 60hz is also smooth, and one advantage with a 60hz display is it consumes less battery power than 90hz and 120hz. Obviously, more battery power is required for refreshing the display 120 times.  Which One...
Read More

HP, Dell, Apple, Lenovo, Asus - Which Brand Laptop Should I Buy?

Image
  There are lots of laptop selling companies in the world like HP, Dell, Apple, Asus, etc. People have lots of options to choose a laptop from these brands. But, many people get confused while choosing the brand of a laptop. Either they should buy an HP laptop or Dell. All the top laptop manufacturing brands like HP, Dell, Apple, Asus, Acer, Lenovo, etc make the best laptops. Every company provides laptops that will fulfill your all needs for a laptop. Which Brand Laptop You Should Buy? Honestly, I think you should check the specification of the laptop rather than checking the brand. Every laptop manufacturing brand is trying to provide the best quality laptop to the user. That has also confused people to choose a laptop brand. Before buying any laptop, first of all, make a list of laptops and then compare the specification according to your requirements. If HP laptop is fulfilling your requirements then go buy that model of HP laptop. If Dell or Apple laptop is fulfilling your req...
Read More

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

12MP vs 48MP vs 64MP vs 108MP | Does More Megapixel Equal Better Image Quality?

Image
Right now, In a smartphone, you will get a 48MP Camera, 64MP Camera, 108MP Camera, and so on. But, Does this number of megapixels improve the image quality? What is a Megapixel? Megapixel means a million pixels in an image. Pixel is the small dot or square on the image. By combining millions of pixels, one image is formed. 1 Megapixel = 1 Million Pixel, 2 Megapixel = 2 Million Pixel, 12 Megapixel = 12 Million Pixel, 48 Megapixel = 48 Million Pixel, 64 Megapixel = 64 Million Pixel, and so on.   Does More Megapixel equal better image quality? No. A Megapixel is just a million pixels in an image. Many other factors also matter while capturing an image like Image Sensor, Aperture, Megapixel, Lens, and Software.    If you have a 108 Megapixel Camera with a small image sensor and a 12 Megapixel camera with a big image sensor. Then, The second one will have better quality. It's because, in a big image sensor, the pixel size is bigger. If the pixel size is bigger, it can capture...
Read More

5 Websites To Increase Your Typing Speed

Image
If you want to improve your typing speed, then you must do practice typing. If you want someone or something to guide you while practicing typing, you can visit these 5 websites. One website is also enough to guide you. 10FastFingers.com 10FastFingers will help you to improve your typing speed, test your typing speed, play typing speed games against other users online, etc. Ratatype.com Ratatype is also one of the popular websites for doing typing practice. Lots of people use this website to increase their typing speed.   Thetypingcat.com TheTypingCat is the most popular website for improving typing speed. You can do typing text, take typing guidance, etc on this website.   TypingTest.com TypingTest is only made for testing the typing speed and some games. You can check it out if  you just want to check your typing speed. Typing.com Typing will also help you to improve your typing speed and become your typing tutor.
Read More

How To Create A Semi-circle Using Only HTML and CSS?

Image
STEP 1: Add a <div class="semi-circle"></div> in the body section of an HTML document. STEP 2: Go To your CSS file and add this code.  .semi-circle{  width: 150px;   height: 75px;   background-color: black;   border-radius: 100px 100px 0 0; } Output The width: 150px; and height: 75px; gives width and height and create a rectangle. Then, background-color: black; gives color to the background so that we can see the actual rectangle created. And the last one, border-radius: 100px 100px 0 0; , it create a rounded border on the top-left and top-right corner of  the rectangle. The two zeros in ( border-radius: 100px 100px 0 0 ; ) is for the border-radius for bottom-right and bottom-left and we kept it width 0 to make it look like a semi-circle.
Read More

6 Useful Websites For Students

Image
  On the Internet, there are millions of sites including smarttechtip.com . Below I have mentioned 6 useful websites for the students. wikiHow.com If you want a solution for a HowTo, How related question on any topic. Then, you should visit wikiHow.com. WikiPedia.org Most of you may already know about this popular site. But, many students don't take advantage of Wikipedia. You can find the answer to any question on Wikipedia. Grammarly.com Grammarly will help you to write an article, paragraph without any grammar and spelling mistakes. Though, you need to pay money for accessing the most useful features. But, the free features of Grammarly are really useful too. Quora.com Quora is a site where you can ask and answer the question around the world. If you are a student and a learner. Then, you must visit Quora. PDFdrive.com If you are a book reader. Then, this website is made for you. On PDFDrive.com, you will get millions of pdf files. You can download the PDF for free and start re...
Read More