I've figured out how to draw an arrow and rotate it:

     .arrow:after {
       content: "";
       display: inline-block !important;
       width: 0;
       height: 0;
       border-left: 8px solid white;
       border-top: 8px solid transparent;
       border-bottom: 8px solid transparent;
       vertical-align: middle;

     }

     .arrow:before {
       width: 75px;
       height: 2px;
       background: white;
       content: "";
       display: inline-block;
       vertical-align: middle;
     }


   <div style="transform: rotate(-60deg)";><span class="arrow"></span></div>

But it rotates around the center, whereas I would want it to rotate from the bottom, for example, if you imagine an arrow at coordinates (0,0), I want it to always start at (0,0) but vary its endpoint.

In this link they manage it with one arrow but I can't seem to only get the one rotating arrow.

Any help is appreciated, thanks!