Learn Intermediate CSS by Building a Cat Painting - Step 29

HTML-CSS
1

Tell us what’s happening:

Not an issue with the code, more of a technical question per se, but with using borders to make triangles, why does the border not seem to have a defined size until it is given a position? The step prior to this when you just have the code for the ear it is much larger and then becomes appropriately sized once given a position. Just curious as to why this is? Thanks!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fCC Cat Painting</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <main>
      <div class="cat-head">
        <div class="cat-ears">
          <div class="cat-left-ear">
            <div class="cat-left-inner-ear"></div>
          </div>
          <div class="cat-right-ear">
            <div class="cat-right-inner-ear"></div>
          </div>
        </div>
      </div>
    </main>
</body>
</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

body {
  background-color: #c9d2fc;
}

.cat-head {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: linear-gradient(#5e5e5e 85%, #45454f 100%);
  width: 205px;
  height: 180px;
  border: 1px solid #000;
  border-radius: 46%;
}

.cat-left-ear {
  position: absolute;
  top: -26px;
  left: -31px;
  border-top-left-radius: 90px;
  border-top-right-radius: 10px;
  transform: rotate(-45deg);
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-bottom: 70px solid #5e5e5e;
}

.cat-right-ear {

/* User Editable Region */

position: absolute;
top: -26px;
left: 163px;  

/* User Editable Region */

  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-bottom: 70px solid #5e5e5e;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Challenge Information:

Learn Intermediate CSS by Building a Cat Painting - Step 29

2

borders have a size for sure if you create them. You just couldn’t see it because of its colors.
Take away the positional properties (comment them out), then change the three lines below to use pink:

  border-left: 35px solid pink;
  border-right: 35px solid pink;
  border-bottom: 70px solid pink;

then you’ll see it.

1 Like
3

So when the position is commented out and the color is changed the border is the width of the Cat head. My question is why is it that width now but once positioned it shrinks to what is actually 70px? Is it because the cat-head div is its parent so it just defaults to that without positioning?

1 Like
4

yes and no.

Yes, the div by default will stretch to fill out the parent space because its default display setting is block.
But to see how it behaves otherwise, keep those position attributes commented out and change the display to inline and you will see how much it shrinks.

edit: i forgot to say: the reason that the position: absolute make the div shrink also is because it “takes it out of the flow” of the layout it would normally adhere to.

2 Likes
5

interesting… display inline makes it act (look?) like a column? Gotcha, that makes sense!

1 Like
6

inline just makes it stay on the same line as its sibling elements.
While block makes it go on its own line and stretches it out.

2 Likes
7

Gotcha! thanks for clearing that up for me! I appreciate it.

2 Likes