css方向箭头样式,纯css实现各种方向小箭头

CSS实现带箭头方框怎么控制箭头位置！

你可以做一个带箭头的div；然后样式如下：

div

{

/* 箭头的样式，你自己设计，下面是旋转的样式*/

transform:rotate(90deg);

-ms-transform:rotate(90deg); /* Internet Explorer */

-moz-transform:rotate(90deg); /* Firefox */

-webkit-transform:rotate(90deg); /* Safari 和 Chrome */

-o-transform:rotate(90deg); /* Opera */

}

这个是CSS3，所以浏览器并不是都兼容的。上面的deg就是角度单位度。

相关问答

Q1: css 指向下一个的箭头怎么做

就用div加css就能做出这种效果了.给你一个刚写的例子。

div style='background:red;height:20px;width:30px;display: inline-block;'/div

div style='top:5px;height: 0px;border: 15px red solid;width: 20px;border-top-color: transparent;border-right-color: transparent;border-bottom-color: transparent;display: inline-block;position: relative;left: -4px;'/div

Q2: css 向左向下箭头

使用

当然，其他任意方向也是可以的，只需要控制旋转角度rotate即可。原理是构造了一个正方形，隐藏了其中的两条边left和bottom，然后进行旋转。

通过使用正方形左下两条边，并向下向右平移，再旋转，得到一个向下并居中的箭头

Q3: css鼠标放上去把箭头变成手一样的样式怎么写

任意标签中插入 style="cursor:hand"

多种形状可供选择

hand是手型

pointer也是手型，这里推荐使用这种，因为这可以在多种浏览器下使用。

crosshair是十字型

text是移动到文本上的那种效果

wait是等待的那种效果

default是默认效果

help是问号

e-resize是向右的箭头

ne-resize是向右上的箭头

n-resize是向上的箭头

nw-resize是向左上的箭头

w-resize是向左的箭头

sw-resize是左下的箭头

s-resize是向下的箭头

se-resize是向右下的箭头

auto是由系统自动给出效果