Hello, I have an open question, not really about a step: how is it possible, that those CSS lines created a triangle on the screen? With my common sense I would assume that it is a rectangle, because there is no indication of a triangle - no rotation of the borders, no angles, nothing. Please, help me understand!
There is a div with class "cat-left-ear "
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 70px solid #5e5e5e;
The same with this one, a triangle:
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 20px solid #442c2c;
As far as I understand:
- position, top, left - position of the figure on the screen
- border radius - how circular the apexes are
- border left, right, bottom - just the lines around the area - when I add “top”, nothing happens