0:00 The first thing we're going to do is give this anchor tag a width of w-40. That's going to help us visualize things a little bit better. Now the banner sticks out of the container square. That's on purpose so we can figure out where the edges should align.

0:14 Let's try rotate the banner. Then we'll try to do this bottom right edges alignment. I'll go with rotate. I think we can go rotate 45 degrees here. That's not looking quite like what we want just yet.

0:27 To be honest, when building this ribbon myself, I got stuck for quite a while trying to figure out a good way to rotate and position this element properly. I've tried magic numbers, flexbox, lots of things. I'll show the solution that worked great for me.

0:40 Let me remove the rotate-45 class for a second because that was one of the reasons why it got so complicated when I was prototyping this component. I was trying to position it while rotated. This really led to a lot of confusion. Let's position it first and then rotate it.

0:57 Let's try to line up these two bottom right edges, here and there, at the bottom of the container. The parent container, the square here, has a position of absolute. Inside of it, this element is a child.

1:10 If I give a class of absolute here, it will take its absolute parent, this element, as its own relative context, which means that I can position the element to the bottom right with bottom- and right-.

1:24 That's a great start. Now we can try rotate the element once again with rotate-45. We're still not quite there yet. If you look at how the element rotates, you might notice something. Let me change the value of the rotation. Let's go with rotate- to start with and then 3, 6, 12.

1:44 It looks like the rotation is happening right around the center of the element. Imagine if you had a pin and you put it right in the middle of this ribbon element. Then you took the edges and started moving them with your hands. It pivots around the center point. This is exactly what's happening because of the transform-origin property, which is set by default to center.

2:07 If you could take that pin away from the center of the element and place it anywhere you want it, where would you place it on the element to make the rotation happen like we want? Let's not actually put a real pin on our screen, please.

2:22 The bottom right of the element sounds like an ideal place to put that pin. We will put it right in the bottom right corner and then take the top left edge and pivot it around. If I type the word origin, you can see that we set it to origin-center. We have top, top-right, right, and bottom-right.

2:38 If I hit save, you might notice that now our bottom right corners are perfectly aligned. If I go through the rotation increments again with , 3, 6, 12, you can see that it's always right where it should be. If we go with 45, we have the perfect alignment that we were looking for.