Learn Intermediate CSS by Building a Picasso Painting - how do borders get angled?

[txhawg]

Step 18 through 21 we’re creating a “hat”. The course tells me to type stuff, but I do not understand how the result is obtained. I want to know what is happening.
For example:

Step 18: style a div with width and height of 0 , and a border-style of solid .

Step 19: Set a border-width of 0 120px 140px 180px to size the hat properly.

Ok, I get that so far. We created a square with no size and then created some super-thick borders around 3 sides of that square. That creates 3 overlapping lines (top border has size of 0) that create a big rectangle.

Step 20: Now you have a large box. Give it a border-top-color , border-right-color , and border-left-color of transparent . Set the border-bottom-color to GhostWhite . This will make it look more like a hat.

At this point the shape disappears into the div behind it because it becomes the same color.

Step 21: Give the hat a position of absolute , a top value of -140px , and a left value of 0 .

So, the shape moves and now can be seen again, but it is now a TRIANGLE!.

Wait…what? A triangle? I just took 3 straight lines, made 2 of them transparent, and the third one became a triangle? How is this possible? All the lines (borders) were either vertical or horizontal and rectangular, correct?

How does this happen? What causes the angles to be shown/hidden? What kind of dark magic is being perpetrated on me?

[bbsmooth]

They are playing tricks with the border. To see this clearly, make the following changes to #white-hat CSS:

  border-width: 60px;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;

You’ll see that each border makes a triangle as if fills up space. Then it’s just a matter of adjusting the individual borders to get the triangles the way you want them and making three of the borders transparent so it just looks like there is one triangle.

[txhawg]

@bbsmooth

border-width: 60px;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;

Wow, that is VERY interesting! If have a horizontal border with no vertical borders it shows as a rectangular shape. If I have a horizontal border adjoining a vertical border it joins the two borders with a 45 degree angle on each.

I guess it kind of makes sense after thinking about it for an hour or so.

Thanks for the explanation. I was befuddled.

[sgbarreros]

I do mostly back end development, and I find this very difficult to comprehend. The logic behind it or the lack there of makes it very challenging.

[bbsmooth]

Just think of it like putting a frame around a picture. The frame is a few inches thick on all sides. Where the top frame and side frame connect you create a 45 degree angle on each piece so they fit together nicely. You do the 45 degree angle for all four corners of the frame. That’s exactly what happens with borders in CSS.

[sgbarreros]

I always thought the angles on the border edges were 90 degrees. Maybe, I 've never played around with borders in this way. If the edges are 45 degrees, as you say they are, then it makes total sense now.
Thanks!