多种形状可供选择
hand是手型
pointer也是手型,这里推荐使用这种,因为这可以在多种浏览器下使用。
crosshair是十字型
text是移动到文本上的那种效果
wait是等待的那种效果
default是默认效果
help是问号
e-resize是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头
auto是由系统自动给出效果
当div宽度为0,高度为0的时候,只设置border的大小和四边不同颜色可看到下图,只保留一边的颜色,另外三边的颜色设置为transparent可得到一个方向的三角形。因此,可延伸出设置一边的border的颜色,相邻两边的border设置为transparent可得到一个方向的三角形。
border的大小的值为三角形底边上的高,三角形的底为相邻两边的border的高的和,如下图所示的红色锐角三角形
若想实现直角三角形的效果,如下图所示直角在左上的三角形,按原理可设置上border和左border的颜色,另外两条边的颜色为transparent,此样式可简写为只设置上border的颜色,另一条相邻的右border为transparent
你也许会遇到要画个奇怪三角形的时候,只要参考锐角三角形的方式,找到三角形底边和高,计算出三角形高和把相邻两条边的高相加作为底部,你可以画出各种各样的三角形,如果再加上角度旋转的css,你便啥三角形都能画!
此类三角形解决思路通常使用两个不同颜色的三角形做颜色叠加,比如做如上图所示的边框为1px的红色边框白色底三角形,就先画一个红色三角形,再画一个尺寸少2px的白色底三角形,然后设置两个三角形的position将三角形重叠,这里使用伪元素实现
1、向上正箭头
2、向下正箭头
3、向左正箭头
4、向右正箭头
5、向左上箭头
6、向右上箭头
7、向左下箭头
8、向右下箭头
就用div加css就能做出这种效果了.给你一个刚写的例子。<div style='background:redheight:20pxwidth:30pxdisplay: inline-block'></div>
<div style='top:5pxheight: 0pxborder: 15px red solidwidth: 20pxborder-top-color: transparentborder-right-color: transparentborder-bottom-color: transparentdisplay: inline-blockposition: relativeleft: -4px'></div>