Learn Intermediate CSS by Building a Picasso Painting - Step 74

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/ Safari/537.36

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

Link to the challenge:

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

yep figured it on my own

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