Learn Intermediate CSS by Building a Picasso Painting - Step 74

HTML-CSS
1

Tell us what’s happening:
I’m able to do this step yet I just can’t understand how my code forms a triangle.

I tried changing each of the border-#-color to understand this concept and it led me to believe that I actually made a 3 triangle formation resembling a rectangle. my conclusion came from two factors:

  1. border-left-color did not show anything despite setting color to it
  2. all other border-#-color styles except border-left-color, together formed 3 different colored triangles when I gave them varied colors.

After this I realized this might be about border-width so I searched it up on w33 yet I still do not understand as to how width has anything to do with the formation of triangle. When I changed around border-width values they just made the existing triangles larger or smaller.

So this is where I’m at now. Any help would be appreciated.

Your code so far

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 42px 45px 45px 0;
  border-top-color: transparent;
  border-right-color: Gold;
  border-bottom-color: transparent;
  border-left-color: transparent;
  display: inline-block;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Challenge: Learn Intermediate CSS by Building a Picasso Painting - Step 74

Link to the challenge:

2

How did you get on in the end? Did you manage to pass the task?

3

yep figured it on my own

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.