Use CSS to achieve arrows of any size, direction and Angle

Drop – down arrows are often used in web development

    {  
        display: inline-block;  
        margin: 72px;  
        border-top: 24px solid;
        border-right: 24px solid;  
        width: 120px;
        height: 120px;  
        transform: rotate(45deg); 
    } 
Copy the code

This is done using the border-top, border-right div, and then rotating the div.

Arrows at any Angle

Here’s a question: what if I wanted an arrow with an Angle of 120 degrees? Since border-top, border-right is always 90 degrees, just rotation won’t work. We can rotate the div 45 degrees to make it a diamond and then we can scale it to any Angle, and we can get an arrow at any Angle. Since rotation and expansion are used, transform: matrix(a, B, C, D, E, F) is needed. The six variables here form a 3-medium transformation matrix

The translation, rotation, expansion transformation of any point p(x,y) and their various combinations can be achieved by this transformation matrix:

Note: a point is represented here in homogeneous coordinates. So in a nutshell, p of x, y is p prime of x’, y’, 1.

Translation matrix

V of x and y shifted tx along the x axis, and ty along the y axis. There are:

x' = x + tx
y' = y + ty
Copy the code

So the translation matrix:

Rotation matrix

The rotation of v(x, y) θ to v'(x’, y’) about the origin

X = r times cos ϕ, y = r times sin ϕ xCos' = r * (theta + ϕ) = r * cos (theta) * cos (ϕ) - r * sin (theta) * sin (ϕ) / / cosine formula y '+ ϕ = r * sin (theta) = r * sin (theta) * cos (ϕ) + r * cos (theta) * sin (ϕ) / / sine formulaCopy the code

So:

xTheta prime = x cosine theta minus y sine theta y primeIs equal to x sine theta plus y cosine theta.Copy the code

So the rotation matrix:

Scaling matrix

Let’s say the x and y expansion rates are kx and ky, respectively. There are:

x' = x * kx
y' = y * ky
Copy the code

So:

Composite transform

What if I shift p(x, y), then rotate (B), and then scale (C)?

p' =C(B(Ap)) ==> p'= (CBA)p // Binding rate of matrix multiplicationCopy the code

Now the arrow at any Angle o is easy:

1. First, rotate div 45 degrees to be a diamond, and transform it to M1
2. Expansion x axis, Y axis:

    xSize * cos(o/2) = x * √2 * cos(o/2) y'Size sine (o/2) = y * √2 sine (o/2)Copy the code

Kx = square root of 2 cos(o/2); Ky is square root of 2 sine of o over 2, and that gives you an arrow at any Angle. Transformation of the M2

If the arrow is not pointing to the right, you can do one rotation and get an arrow in any direction. Transformation for the M3

So since p’ =C(B(Ap)) ==> p’ = (CBA)p, we can calculate M3M2M1, and then apply the corresponding transformation to div, and we can get an arrow at any Angle, in any direction.

The width and height of the div are the side lengths of the arrows, and you can adjust them to get arrows of any side length.

The React components

For ease of use, the arrow is encapsulated as a React component. Git address

The sample

Simple arrow	Simulation of the select	Divergence of the arrow

props

Install and use

npm install rc-arrow --save

import Arrow from 'rc-arrow'

class Hw extends Component {
    render() {
        return (
            <Arrow size="20px" color="red"/>)}}Copy the code