border的大小的值为三角形底边上的高,三角形的底为相邻两边的border的高的和,如下图所示的红色锐角三角形
若想实现直角三角形的效果,如下图所示直角在左上的三角形,按原理可设置上border和左border的颜色,另外两条边的颜色为transparent,此样式可简写为只设置上border的颜色,另一条相邻的右border为transparent
你也许会遇到要画个奇怪三角形的时候,只要参考锐角三角形的方式,找到三角形底边和高,计算出三角形高和把相邻两条边的高相加作为底部,你可以画出各种各样的三角形,如果再加上角度旋转的css,你便啥三角形都能画!
此类三角形解决思路通常使用两个不同颜色的三角形做颜色叠加,比如做如上图所示的边框为1px的红色边框白色底三角形,就先画一个红色三角形,再画一个尺寸少2px的白色底三角形,然后设置两个三角形的position将三角形重叠,这里使用伪元素实现
1、向上正箭头
2、向下正箭头
3、向左正箭头
4、向右正箭头
5、向左上箭头
6、向右上箭头
7、向左下箭头
8、向右下箭头
任意标签中插入 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是由系统自动给出效果