Open question - Learn Intermediate CSS by Building a Cat Painting

HTML-CSS
1

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
2

I had the same question when I was doing this part, but I kind of figure out on my own (not 100% sure it’s the correct answer). I think the triangle is created by borders only, because the content is empty. Borders are very thick in this case, so the bottom border is black while the right and left border are transparent. The connecting part of borders is diagonal, so the bottom border was “cut” into a triangle.

3

I am working on Learn CSS Variables by Building a City Skyline. On step 53, it goes through the same technique to create triangle step by step.

4

I will check it out when it accepts my step 51… maybe you could help my in this topic? I published it a second ago

5

Actually, each border of a square/rectangle is trapezium. you can see it yourself, just make borders of a squre very thick and set color of each border different. making the left and right border transparent makes the trapezuim shape. And finally, makeing the top border width 0, creates the triangle. Here different method is used but it is working in the similar way.

6

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