How to use CSS to implement arrows of any size, any direction and any angle

This article mainly introduces the use of CSS to achieve arbitrary size, arbitrary direction and arbitrary angle of the arrows examples of relevant information, small series feel very good, and now share to everyone, but also for everyone to do a reference. Let's take a look at it with a little knitting.

In web development, the drop-down arrows are often used

, RIGHT Arrow

Such an arrow. CSS is generally used to achieve:

{          display:inline-block;          margin:72px;          BORDER-TOP:24PX solid;        BORDER-RIGHT:24PX solid;          width:120px;        height:120px;          Transform:rotate (45deg);     }

Because this is done by using P's border-top, Border-right, and then by rotating p.

Arrows at any angle

Here's a question: What if you need an arrow with an angle of 120 degrees? Because of the border-top, Border-right has been 90 degrees, so just by rotating not. We can first rotate p by 45 degrees, let it become a diamond and then stretch, to any angle, so that you can get an arbitrary angle of the arrows. Because of the rotation and scaling of the two transformations, it is necessary to use transform: matrix(a,b,c,d,e,f) this transformation matrix. The 6 variables here make up a 3-medium transformation matrix.

The translation, rotation, and scaling transformations of any point P (x, y) and their various combinations can be achieved through this transformation matrix:

Note: Here we use homogeneous coordinates to express a point. Simply put, p (x, y) is expressed as P ' (x ', y ', 1)

Translation matrix

V (x, y) pans the TX along the x-axis, translating ty along the y-axis. Then there are:

X ' = x + tx
Y ' = y + ty

So the translation matrix:

Rotation matrix

V (x, y) point around Origin rotation θ to V ' (x ', y ')

Then there are:

x = R * COS (Φ)
y = R * sin (Φ)

X ' = R * cos (θ+ϕ) = R * cos (θ) * cos (Φ)-R * sin (θ) * sin (ϕ)//cosine formula
Y ' = R * Sin (Θ+ϕ) = R * Sin (θ) * cos (Φ) + R * cos (θ) * sin (ϕ)//sine formula

So:

X ' = x * cos (θ)-y * sin (θ)
Y ' = x * sin (θ) + y * cos (θ)

So the rotation matrix:

Scaling matrix

Assuming the x-axis, the scaling rate of the y-axis is KX, KY, respectively. Then there are:

X ' = x * KX
Y ' = y * KY

So:

Composite transformations

What if the P (x, y) is shifted first (transformation matrix A), then rotated (transformation matrix B) and then scaled (transformation matrix C)?

P ' =c (B (Ap)) ==> p ' = (CBA) p//matrix multiplication binding Rate

Now the arrows for any angle o are simple:

First, the p is rotated 45 degrees into a diamond, transformed into a M1 telescopic x-axis, the y-axis:

X ' = size * cos (O/2) = x *√2 *  cos (o/2) y ' = size * sin (O/2) = y *  √2  * sin (O/2)

namely: KX =√2 * cos (O/2); KY =√2 * sin (O/2) This gives the arrows at any angle. Transform to M2

If the direction of the arrow is not pointing to the right, you can get an arrow in any direction when you rotate it. Transform to M3

As a result p' =C(B(Ap)) ==> p' = (CBA)p , we can calculate the M3 M2 M1, and then the corresponding transformation of p, you can get any angle, any direction of the arrow.

The width and height of p are the side lengths of the arrows, which can be adjusted to get arrows of any length.

React components

For ease of use, this arrow is encapsulated for a react component.

Example

Simple arrows

Analog Select

Diverging arrows

Props

name	type	default	Description
Degree	Number	90	Angular angle of the arrow
Offsetdegree	Number	0	Direction of Arrow, pointing to the right by default
Color	String	-	The color of the arrows
Size	String	10px	Arrow Edge Length

Installation use

NPM Install Rc-arrow--save

Import Arrow from ' Rc-arrow ' class Hw extends Component {    render () {        return (            <arrow size= "20px" color= "red "/>        )    }}

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!