I'm trying to create an arrow that moves(goes up through the upright corner and then reappears via the bottom left corner after that). So far I have the disappearing portion done but cannot resolve how to get it to then come back up through the bottom left.
My code is as follows:
<div class="text-3xl w-fit" style="clip-path: inset(0 0 0 0 );" >
<div class="transition ease-in-out hover:-translate-y-5 hover:translate-x-5 " >↗</div>
</div>
(also any better method would be lovely)
Try this:
<script src="https://cdn.tailwindcss.com"></script>
<div class="text-3xl p-2 group border w-fit grid" style="clip-path: inset(0 0 0 0 );">
<div class="[grid-area:1/1] flex items-center justify-center h-10 w-10 transition ease-in-out group-hover:delay-300 translate-y-10 -translate-x-10 group-hover:translate-y-0 group-hover:translate-x-0">↗</div>
<div class="[grid-area:1/1] flex items-center justify-center h-10 w-10 transition ease-in-out delay-300 group-hover:delay-[0s] duration-300 group-hover:-translate-y-10 group-hover:translate-x-10">↗</div>
</div>