Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Vamsi Pavan Mahesh Gunturu
Vamsi Pavan Mahesh Gunturu
4,541 Points

Can anyone explain me how to make a triangle using css

I have stumbled upon this

<div class="triangle">
</div>

<pre>
.triangle{
 width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid green;
}
</pre>

Can anyone tell me how the logic goes. I don't understand the border concept for a zero width element. And what about the padding?

2 Answers

elk6
elk6
22,916 Points
elk6
elk6
22,916 Points

Hi Vamsi,

Basically, you are only seeing one border. Since the div with the class of triangle has no width, the angle where the borders will meet is calculated on the width of the two meeting borders. If you keep them both at the same width, the angle will be 45 degrees. By making only one border visible, you can create the illusion of a triangle while in fact you are looking at a square ( or more a rectangle in this case, since there are 3 borders ).

Take a look at this simple pen i just put up, that might help explain what it means.

http://codepen.io/McSuckelaer/pen/PZZxJp

Vamsi Pavan Mahesh Gunturu
Vamsi Pavan Mahesh Gunturu
4,541 Points

Hi Elian. Thanks for your snippets. But what I am trying to understand is basically a point is created, but when a top border is created of thickness say 50 px black. Upto this point there is no visual. Why? after adding left 50px I expect it to be like this as in following. can you help me out https://drive.google.com/file/d/0BxY-ounFx9_hX0RBRm5zWXFldnF5NUVIZ3oyNkhxU1habzVZ/view?usp=sharing

elk6
elk6
22,916 Points

I've added another triangle to the pen, this time with a box that has a bit of width. See how the borders meet at an angle. Not solid or overlapping eacht other. Now, if you continue that angle, they will meet in the middle.

Take away the box width and/or height and make 3 of the 4 borders invisible and voila, we have a triangle.

Steven Parker
Steven Parker
242,296 Points
Steven Parker
Steven Parker
242,296 Points

Remember that the borders do not overlap, instead they meet each other at an angle. Try the following code: when you hover over the triangle, the other borders will be shown in color, plus the right border will be slowly added giving you a box of size 0 but with 50px borders all around. Then move the mouse away and it will go back to showing only the left border again with the others either transparent in color or collapsed, leaving the original triangle.

Below that I added another example showing an equilateral triangle pointing up (but no animation).

<style type="text/css">
.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid green;
  border-right: 0px solid blue;
  transition: border-right-width 2s linear;
}
.triangle:hover {
  border-right-width: 50px;
  border-top-color: yellow;
  border-bottom-color: red;
}
.isotriangle {
  width: 0;
  height: 0;
  border-bottom: 83px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
</style>

<div class="triangle"></div>
<br>
<div class="isotriangle"></div>