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.
Step 18: style a div with
0 , and a
Step 19: Set a
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-right-color , and
transparent . Set the
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
absolute , a
top value of
-140px , and a
left value of
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?