Child not following parent's size when rotated

HTML & CSS
1

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?

2

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
3

Ohh, I get it now. Thanks!

4

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