具体原理可以参考我的这篇文章:jQuery弹出层+CSS箭头制作

使用方法如下:




	
	无标题文档
	<script type="text/javascript" src="jquery-1.9.1.js"></script>
	<script type="text/javascript" src="jquery.arrow.js"></script>
	

	
	
	
	


<script type="text/javascript">
	//左箭头
	$(".left").arrow({color:'#FF0000',height:10,width:20,direction:'left'});
	//默认情况
	$(".top").arrow();
	//向下箭头
	$(".bottom").arrow({color:'#FF9900',height:30,width:30,direction:'bottom'});
</script>

具体实现代码:

/**
 * jquery 箭头生成
 * @author:xuzengqiang
 * @since :2015-2-4 15:31:39
**/
;(function($){   
	jQuery.fn.extend({
		/**
		 *描述:生成指定箭头样式
		**/
		arrow:function(options){
			var defaultOptions = {
					color:'#AFAFAF',
					height:20,
					width:20,
					//方向:默认向上'top',供选择['up','bottom','left','right']
					direction:'top'
				};
			var settings = jQuery.extend(defaultOptions,options||{}),
				current = $(this);
			function loadStyle(){
				current.css({"display":"block","width":"0","height":"0"});
				if(settings.direction === "top" || settings.direction === "bottom") {
					current.css({
								"border-left-width":settings.width/2,
								"border-right-width":settings.width/2,
								"border-left-style":"solid",
								"border-right-style":"solid",
								"border-left-color":"transparent",
								"border-right-color":"transparent"
								});
					if(settings.direction === "top") {
						current.css({
								"border-bottom-width":settings.height,
								"border-bottom-style":"solid",
								"border-bottom-color":settings.color	
								});
					} else {
						current.css({
								"border-top-width":settings.height,
								"border-top-style":"solid",
								"border-top-color":settings.color	
								});
					}
				} else if(settings.direction === "left" || settings.direction === "right") {
					current.css({
								"border-top-width":settings.height/2,
								"border-bottom-width":settings.height/2,
								"border-top-style":"solid",
								"border-bottom-style":"solid",
								"border-top-color":"transparent",
								"border-bottom-color":"transparent"
								});
					if(settings.direction === "left") {
						current.css({
								"border-right-width":settings.width,
								"border-right-style":"solid",
								"border-right-color":settings.color	
								});
					} else {
						current.css({
								"border-left-width":settings.width,
								"border-left-style":"solid",
								"border-left-color":settings.color	
								});
					}
				}
			}
			return this.each(function(){ loadStyle(); });
		}
	});
})(jQuery);