使用css实现任意大小、任意方向、任意角度的箭头在web开发中，经常会用到下拉箭头、向右箭头等箭头.通常用css实现：{display:inline-block;边距：72px；border-top:24pxsolid;border-right:24pxsolid;宽度：120px；高度：120px；变换：旋转（45度）；使用div的border-top，border-right，然后旋转div来实现。任意角度的箭头这里有一个问题：如果你需要一个角度为120度的箭头怎么办？因为border-top,border-right总是90度，所以旋转即可。我们可以先把div旋转45度，变成菱形，然后拉伸到任意角度，这样就可以得到任意角度的箭头。由于使用了旋转和缩放两个变换，所以需要用到变换矩阵transform：matrix(a,b,c,d,e,f)。这里的6个变量组成了一个三向变换矩阵$$\left[\begin{matrix}a&c&e\\b&d&f\\0&0&1\end{matrix}\right]$$任意点p(x,y)的平移、旋转、缩放变换及其各种组合都可以通过这个变换矩阵来完成：$$\left[\begin{matrix}x\\y\\1\end{matrix}\right]\left[\begin{matrix}a&c&e\\b&d&f\\0&0&1\end{matrix}\right]=\left[\begin{matrix}x'\\y'\\1\end{matrix}\right]$$注：这里用齐次坐标表示一个点。简单的说，p(x,y)表示为p'(x',y',1)平移矩阵v(x,y)沿x轴平移tx，沿y轴平移ty。然后有：x'=x+txy'=y+ty所以平移矩阵：$$\left[\begin{matrix}x'\\y'\\1\end{matrix}\right]=\left[\begin{matrix}1&0&tx\\0&1&ty\\0&0&1\end{matrix}\right]\left[\begin{matrix}x\\y\\1\end{matrix}\right]$$旋转矩阵v(x,y)将θ绕原点旋转到v'(x',y')，则：x=r*cos(?)y=r*sin(?)x'=r*cos(θ+φ)=r*cos(θ)*cos(φ)-r*sin(θ)*sin(φ)//余弦公式y'=r*sin(θ+φ)=r*sin(θ)*cos(?)+r*cos(θ)*sin(?)//正弦公式所以：x'=x*cos(θ)-y*sin(θ)y'=x*sin(θ)+y*cos(θ)所以旋转矩阵：$$\left[\begin{matrix}x'\\y'\\1\end{matrix}\right]=\left[\begin{矩阵}cos(θ)&-sin(θ)&0\\sin(θ)&cos(θ)&0\\0&0&1\end{matrix}\right]\left[\begin{matrix}x\\y\\1\end{matrix}\right]$$膨胀矩阵假设x轴和y轴的膨胀和收缩比例分别为kx和ky。那么：x'=x*kxy'=y*ky所以：$$\left[\begin{matrix}x'\\y'\\1\end{matrix}\right]=\left[\begin{matrix}kx&0&0\\0&ky&0\\0&0&1\end{matrix}\right]=\left[\begin{matrix}x\\y\\1\end{matrix}\对]$$如果复合变换是先平移p(x,y)（变换矩阵A），再旋转（变换矩阵B），再拉伸（变换矩阵C）？p'=C(B(Ap))==>p'=(CBA)p//矩阵乘法的组合率现在任意角度o的箭头很简单：先将div旋转45度形成菱形，将其转化为拉伸x轴、y轴的M1：x'=size*cos(o/2)=x*√2*cos(o/2)y'=size*sin(o/2)=y*√2*sin(o/2)即：kx=√2cos(o/2)；ky=√2sin(o/2)这样就得到任意角度的箭头。转换为M2。如果箭头的方向不指向右边，旋转一圈后可以得到任意方向的箭头。变换为M3，那么由于p'=C(B(Ap))==>p'=(CBA)p，我们可以先计算M3M2M1，然后对div进行相应的变换，得到任意角度，任意方向的箭头向上。div的宽高是箭头的边长，任意边长的箭头都可以通过调整得到。为了方便React组件，将这个箭头封装为React组件。git地址示例简单箭头模拟selectdivergentarrowpropsnametypedefaultdescriptiondegreennumber90箭头的角度，角度设置offsetDegreenumber0箭头的方向，默认是指向右边'classHwextendsComponent{render(){return(
