Learn CSS Transforms by Building a Penguin - Step 2

HTML-CSS
1

I’m a little confused about what I’m seeing when I perform this step but maybe I’m missing something here. My code passed for step 2, however, I noticed that the linear gradient wasn’t acting as expected with the 45 degree rotation added to it. To better view this, I added 50% to both rgb color callouts to see what was happening and got this:

image
image1045×695 622 Bytes

Shouldn’t it look more like this?

image
image867×254 595 Bytes

Any explanation would be helpful. Thanks in advance!

My code:

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Penguin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>

  <body>
  </body>
</html>

body {
  background: linear-gradient(45deg, rgb(118,201,255) 50%, rgb(247, 255, 222) 50%);
}
2

I think it’s simply how the gradient shows up in the iframe.

3

I’ve continued to step 4 and seems that when you define the height, the linear gradient finally behaves as expected.

image
image1048×696 2.1 KB

Still not really understanding why it’s not like this to begin with.

body {
  background: linear-gradient(45deg, rgb(118, 201, 255) 50%, rgb(247, 255, 222) 50%);
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
}