Child not following parent's size when rotated

I have an arrow inside the white box, when I rotate that arrow, it overlaps the parent. Is there a way to still respect the parent’s size even when rotated?

Transformed elements are removed from the flow in respect that they do not alter their surroundings when transformed. That’s what makes them performant as only the transformed element needs repainting when it is moved.

You could scale the element smaller when you transform it so it fits better. You also need box sizing applied as the border is too wide initially.

arrow {
   width: 100%;
   height: 100%;
   transition: 0.3s ease;
   border: solid black;
   border-width: 0 1rem 1rem 0;
   transform: rotate(45deg) scale(0.75);
   box-sizing:border-box;
  }
1 Like

Ohh, I get it now. Thanks!