在WEB开发中,POPUP和tooltip经常要用到类似的箭头,http://cssarrowplease.com/ 网站可以帮助我们自动生成对应的CSS代码。下面主要阐述一下CSS实现箭头的原理
上面的HTML代码将产生如下的效果
根据ID指定CSS的width和height属性,然后加入10px的黑色border
如果将这个DIV的面积缩小,width和height都改为20px,我们再看一下显示的效果
下面我们把DIV的width和height都设置为0
在WEB开发中,POPUP和tooltip经常要用到类似的箭头,http://cssarrowplease.com/ 网站可以帮助我们自动生成对应的CSS代码。下面主要阐述一下CSS实现箭头的原理
上面的HTML代码将产生如下的效果
根据ID指定CSS的width和height属性,然后加入10px的黑色border
如果将这个DIV的面积缩小,width和height都改为20px,我们再看一下显示的效果
下面我们把DIV的width和height都设置为0