There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
Agree with a comment or answer? Like () to up-vote the contribution!
I don’t fully understand how the breadcrumbs chevrons were formed. How come by just playing with border size and transparency you created what is essentially triangles?
I agree. I’m currently in the middle of this exercise, and although I’ve fiddled around with devtools to experiment with the chevrons a bit, some further explanation as to how they are formed into arrows would be much appreciated!
I was also wondering this.
It seems like it works because the borders of a container will have 45 degree angles in the corners (like a picture frame). Therefore by making the top and bottom border blue, for example, but making the left border transparent, you are left with a shape created by leftover 45 degree angles from the top and bottom borders. This trick can also be used to make triangles.
Search for css triangle if you want a better explanation!
Can I please ask in the exercise question 2, why do we change the element to “float: left”, instead of “display: inline”. I thought when we are using float, the display is automatically set as “display: block”?
In the result, after changing to “float: left”, all elements stay together in the same line, same behavior as “inline”.
Really appreciate you mentioning this! I have a much better understanding of how this is working based on you mentioning looking up css triangles! Thanks so much!
What I don’t quite understand is the logic of “position: absolute;” here. I thought it was just about position but not size. Could anyone tell me why it makes the border vertically shrink?
I don’t have a clear answer, however I do know with just “inline” you cannot change the width or height, it would need to be changed to inline-block. I was also wondering why it wasn’t just changed to inline-block.
Why is height included in this styling? It’s my understanding that ‘a’ is an inline element so height would not apply. I removed it with seemingly no effect.
Not sure if this is the correct answer, but MDN says a percentage in relation to the property left means “A of the containing block’s width.”
After taking out the background color for .breadcrumb a (to better see the pseudo-elements), I played with the percent value. If I changed the percent value to 50%, it moved the pseudo-element halfway through the < li > text, so I think “containing block’s width” means the width of the link/text, so setting left to 100% would move the triangle/pseudo element after the text.
Hello, just wanted to add some input about this exercise. I really felt this particular lesson was heavy on the copy-paste the code we’ve already written and bingo, now you’ve created something.
Like other commenters I see from before, I really wasn’t understanding how the css was working to make the arrows since I wasn’t having to do it step-by-step myself but simply copy-pasting someone else’s work.
) below.
) to up-vote the contribution!
