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 "
.cat-left-ear {
position: absolute;
top: -26px;
left: -31px;
border-top-left-radius: 90px;
border-top-right-radius: 10px;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 70px solid #5e5e5e;
}
The same with this one, a triangle:
.cat-nose {
position: absolute;
top: 108px;
left: 85px;
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