Descubrí cómo dibujar una flecha y rotarla:
.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>Pero gira alrededor del centro, mientras que me gustaría que girara desde abajo, por ejemplo, si imaginas una flecha en las coordenadas (0,0), quiero que siempre comience en (0,0) pero varíe su punto final .
En este enlace lo manejan con una flecha, pero parece que no puedo obtener solo la flecha giratoria.
Cualquier ayuda es apreciada, gracias!
en transform: rotate() agregar:
transform-origin: 0% 0%;luego cambie los porcentajes hasta que coincidan donde desea que esté el punto de rotación