1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 5.00 out of 5)

How to make a Trapezoid in CSS

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.

Tip: Click on images to make them larger. If you find anything wrong on this page or need further assistance please comment below or contact me. 🙂
#trapezoid {
border-bottom: 100px solid lightBlue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;

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.

How to make a Trapezoid in CSS was last modified: May 8th, 2015 by Maximus Mccullough

Subscribe To My YouTube Channel:

Please like, share and subscribe.

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips


Cool People Share:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.