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

Make a Triangle in CSS

Making a triangle is a little harder than making a square or rectangle in CSS. Here is what you do. First set up your div, we are going to give our div and id of triangle.

<div id="triangle"></div>

Now we will add the CSS for the triangle.

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. 🙂
<style>
#triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 100px 100px;
border-color: transparent transparent #33ff00 transparent;
}</style>

Make a Triangle in CSS *

That is how you make a triangle in CSS.  We gave this particular triangle the background color of green.  Here is a really cool website that will help you make CSS triangles. It is called the CSS triangle generator.

You can also turn the triangle up, down and sideways. See Chris Coyier’s article on css triangles here.

Subscribe To My YouTube Channel:

Make a Triangle in CSS was last modified: May 22nd, 2015 by Maximus Mccullough

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

Tips

Cool People Share:
create-a-triangle-with-css

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.