How to make a Trapezoid in CSS

Message from Maximus

Hey everybody I want to let you know that I have undertaken the grueling task of getting the heck away from WordPress. I was so sick of the problems and updates I had to do all the time. I am now using my ezbloo system and I am integrating all my old posts into the new system. It sucks, but in the end, I will save bundles of time. I needed to keep things simple and that is why I created ezbloo. I'll have more on this later for you guys after I am done with the total integration of my old posts here. So if you are looking for a post and need it faster, shoot me an email and I will make it a priority. [email protected]

This is how you make a trapezoid in CSS. First you want to set up the div. We will give our div an id of trapezoid.

<div id="trapezoid"></div>

Next we will style the div in our CSS.

<style>
#trapezoid {
border-bottom: 100px solid lightBlue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
</style>

How to make a Trapezoid in CSS

Feel free to copy and paste the code to suit your needs. :-) Most coders tear apart a code piece by piece in order to debug it. Do the same thing to this code so you can lear what each command does to your CSS. This is the best way to learn How to make a Trapezoid in CSS.